JQuery droppable事件触发太早

我正在使用JQuery droppable容器来删除其他元素。用户鼠标悬停在容器上时添加hoverClass。在这个类中，我设置了容器的新宽度。但是这个新的宽度在鼠标离开容器时没有考虑。由于容器具有旧宽度，因此触发了Out事件。更奇怪的是，如果我非常缓慢地移动拖动元素以考虑容器的新宽度。JQuery droppable事件触发太早

我已经在这里摆弄例如： http://jsfiddle.net/SLGdE/709/

测试在Chrome和FF。

我该如何达到新的可放置容器的宽度？

$(function() { 
    $("#draggable").draggable({ 
     revert:true 
    }); 

    $("#droppable").droppable({ 
     tolerance: "pointer", 
     hoverClass: "over" 
    }); 
});

来源

2014-05-05 slotomo

遇到同样的问题，您是如何设法解决您的？ – gwinh

我通过在拖动时手动检查来解决这个问题，如果仍然在可拖拽元素上。 – slotomo

与价值true添加refreshPositions您draggable。但是，请注意，每个https://api.jqueryui.com/draggable/#option-refreshPositions都会有性能提升。所以很可能你的解决方法是一个更好的选择，但也许这个答案可以帮助别人。

$("#draggable").draggable({ 
    revert:true, 
    refreshPositions: true 
});

来源

2015-04-24 16:46:53

该解决方案有效。谢谢！工作小提琴：http://jsfiddle.net/4whv33qj/ – slotomo

您需要添加一个类并对其进行自定义。从jQueryUI的documentation：

$("#droppable").droppable({ 
    drop: function(event, ui) { 
    $(this) 
     .addClass("ui-state-highlight") 
    } 
});

来源

2014-05-05 09:57:14 cor

在删除元素之前发生此问题。问题在于“超过”和“超出”的事件。 – slotomo

好的。我刚刚了解你的问题。 – cor

试试这个http://jsfiddle.net/SLGdE/710/：

$(function() { 
$("#draggable").draggable({revert:true}); 
$("#droppable").droppable({ 
    tolerance: "pointer", 
    hoverClass: "over", 
    over:function(event, ui){ 
     $(this).width($(this).width());//This is the update 
    }, 
    out:function(event, ui){ 
     //alert("out")   
    } 
}); 
});

来源

2014-05-05 10:04:01

Out事件仍然触发得太早。你可以看到，因为颜色变回红色。当离开容器时，宽度不会恢复。 – slotomo

JQuery droppable事件触发太早

回答

相关问题