jquery - jQuery droppable 事件无法触发？

Question

$(".LWdrop").droppable({    
    accept: ".LW",                       
    drop: function(event, ui){
      ui.draggable.addClass("LWactive");
      $(this).droppable('option', 'accept','');
      $(this).css("background-color", "#444444");
    },
    out: function(event, ui){  
      $(this).droppable('option', 'accept', '.LW');
      ui.draggable.removeClass("LWactive");
    },   
    activate: function(event, ui){     
      $(this).css("background-color", "blue");      
    },  
    deactivate: function(event, ui){  
      $(this).css("background-color", "#444444"); 
    }
});

请忽略激活/停用时丑陋的背景颜色变化，这仅用于测试。我遇到了“out”没有被触发的问题。这可能与可拖动对象设置为“恢复：无效”这一事实有关吗？即使删除它，我也无法从 out 事件中执行任何操作……甚至是一个简单的警报框。有小费吗？

Answer 1

当您将 a 悬停在 a 上然后将其移开时，将触发事件输出。不幸的是，当您拖走时不会。draggabledroppabledraggable

Answer 2

当我试图让助手在拖动到可放置对象时进行视觉更改（通过切换类）时，我遇到了类似的问题。和你一样，我发现 out 事件并没有在我期望的时候触发。

通过反复试验，我通过在 over 事件中添加类并在 deactivate 事件中删除它来解决问题。

$("#droppable").droppable({
    over: function(event, ui) {
        ui.helper.toggleClass("over", true);
    },
    deactivate: function(event, ui) {
        ui.helper.toggleClass("over", false);
    }
});

Answer 3

这可能对某人有帮助。

$("#element").droppable({
    over: function( event, ui ) { // dragged over #element
        $(event.target).removeClass('out');
        $(event.target).addClass('over');
    },          
    out: function( event, ui ) { // dragged out #element
        $(event.target).removeClass('over');
        $(event.target).addClass('out');
    },
    deactivate: function (event, ui) { // dropped somewhere
        state = $(event.target).hasClass('over') ? 'over' : 'out');
        if (state == 'out') {
            alert('dropped outside #element');
        }
    }
});