Question

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

如果丢卡1 - ＆gt; class .stack应该是蓝色
如果丢卡2 - >; 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');
    }
});

指向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);
      })

    }
  });
});

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

jQuery确定丢弃的项目（放置事件）

1 个答案: