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事件觸發太早

回答

相關問題