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”没有被触发的问题。这可能与draggables设置为“revert：invalid”的事实有关吗？即使删除它，我也无法从out事件中获得任何内容......甚至是一个简单的警告框。有什么提示吗？

Answer 1

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

Answer 2

当我在拖放一个droppable时尝试让帮助器在视觉上（通过切换一个类）进行更改时遇到了类似的问题。和你一样，我发现当我期待它时，out事件并没有激发。

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

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

jQuery droppable out事件无法触发？

3 个答案: