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