jQuery droppable out event fails to trigger?

问题

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

Please ignore the ugly background-color changes on activate/deactivate, that's only for testing. I'm having a problem where "out" isn't being triggered. Could this have to do with the fact that the draggables are set to "revert: invalid"? Even removing that, I fail to get anything from the out event to execute...even a simple alert box. Any tips?

回答1:

The event out is triggerd when you hover a draggable over a droppable and then move it away. Unfortunately not when you drag a draggable away.

回答2:

I ran into a similar issue when trying to make the helper to change visually (by toggling a class) when dragged over a droppable. Like you, I found the out event didn't fire when I was expecting it to.

Through some trial and error, I solved the problem by adding the class on the over event, and removing it on the deactivate event.

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

回答3:

This can be helpful for someone.

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

来源：https://stackoverflow.com/questions/1469879/jquery-droppable-out-event-fails-to-trigger