Событие 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"); 
    } 
}); 

Пожалуйста, игнорируйте уродливые изменения цвета фона при активации/деактивации, это только для тестирования. У меня проблема, когда «выход» не запускается. Может ли это иметь отношение к тому факту, что для перетаскиваемых объектов установлено значение «revert: invalid»? Даже удаляя это, я не могу получить что-либо из события out для выполнения ... даже простого окна предупреждения. Какие-нибудь советы?

Answer 1

Я столкнулся с подобной проблемой, пытаясь заставить визуально визуализировать помощника (путем переключения класса) при перетаскивании по каплям. Как и вы, я обнаружил, что событие не срабатывало, когда я этого ожидал.

Посредством некоторых проб и ошибок я решил проблему, добавив класс в событие over и удалив его при деактивации события.

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

Answer 2

Событие из является triggerd при обморожении draggable больше droppable, а затем переместить его в стороне. К сожалению, нет, когда вы перетащите draggable.

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