jQuery Droppout事件触发得太早

Question

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

我在这里做了小提琴的例子： http : //jsfiddle.net/SLGdE/709/

经过Chrome和FF测试。

如何实现考虑可放置容器的新宽度？

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

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

Answer 1

您需要添加一个类并对其进行自定义。 从jQueryUi 文档中 ：

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

Answer 2

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

Answer 3

将值true refreshPositions添加到draggable 。 但是请注意，每个https://api.jqueryui.com/draggable/#option-refreshPositions都会对性能造成影响。 因此，您的解决方法可能是一个更好的选择，但也许此答案可以帮助其他人。

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