jQuery droppable 事件无法触发？答案

【问题标题】：jQuery droppable out event fails to trigger?jQuery droppable 事件无法触发？
【发布时间】：2009-09-24 05:22:03
【问题描述】：

$(".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 事件中执行任何操作……甚至是一个简单的警报框。有什么建议吗？

【问题讨论】：

标签： jquery jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

当您将draggable 悬停在droppable 上然后将其移开时，将触发事件out。不幸的是，当您将draggable 拖走时不会。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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');
        }
    }
});

【讨论】：