jQuery droppable out event fails to trigger?

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

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?

Answer 1

try putting the keyword out in single quotes:

'out': function() {
    ....
},

Answer 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);
    }
});

Answer 3

That isn't working for me. Neither 'out': ...