jQuery droppable out 事件无法触发？

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

当您将 draggable 悬停在 droppable 上然后将其移开时，out 事件就会被触发。不幸的是，当您将 draggable 拖走时，情况并非如此。

Answer 2

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

通过一些试验和错误，我通过在结束事件上添加类并在停用事件上删除它来解决了问题。

$("#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');
        }
    }
});