jQuery 确定掉落物品（掉落事件）

Question

我想在删除不同元素后更改 class 的背景颜色

如果丢弃 card1 -> class .stack 应该是蓝色的
如果丢弃 card2 -> class .stack 应该是红色的

$(".stackDrop").droppable({
    tolerance: "intersect",
    accept: ".card1, .card2",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        $(this).append($(ui.draggable));
        $('.stack').css('background-color','red');
    }
});

有一个 link 到 jsfiddle https://jsfiddle.net/70x2set8/1/

Answer 1

您可以使用 $(event.ElementTo) 从事件中访问掉落的卡片属性，因此一种解决方案可能是：

 $(".stackDrop").droppable({
            tolerance: "intersect",
            accept: ".card1, .card2",
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            drop: function(event, ui) {        
                $(this).append($(ui.draggable));
                if($(event.toElement).hasClass("card1"))
                    $('.stack').css('background-color','blue');
                if($(event.toElement).hasClass("card2"))
                    $('.stack').css('background-color','red');
            }
        });

但我建议使用键值对象数组的更好方法：

$(document).ready(function() {
    var array = [{key:"card1", value:"blue"},{key:"card2", value:"red"}]
  $(".card1, .card2").draggable({
    appendTo: "body",
    cursor: "move",
    helper: 'clone',
    revert: "invalid",
  });

  $(".stackDrop").droppable({
    tolerance: "intersect",
    accept: ".card1, .card2",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
      $(this).append($(ui.draggable));
      array.forEach(function(el){
        if($(event.toElement).hasClass(el.key))
            $('.stack').css('background-color',el.value);
      })

    }
  });
});

如您所见，使用此解决方案，您可以添加更多项目并将它们的 class 和颜色设置到数组中。

jQuery 确定掉落物品（掉落事件）

jQuery determinate dropped item (drop event)

jquery

drag-and-drop

jquery-events