JqueryUI droppable'out'事件不會觸發

Question

我有2個Droppables和2個Draggables。

如果將item1拖到垃圾箱1，則無法將item2拖到垃圾箱1，它將恢復到其位置。

如果將item1從垃圾箱1拖到垃圾箱2，則垃圾箱1應該再次變為可用，這是失敗的地方，因為不會觸發'out'事件。

這是代碼：

$(function() {
        $(".item").draggable({
                revert: 'invalid',
                cursor: 'move'
        });

        $("#items").droppable({
                drop: function( event, ui ) {
                    $("#trash").droppable( "option", "disabled", false );
                    $("#trash2").droppable( "option", "disabled", false );
                }
        });

        $("#trash").droppable({
                out: function() {
                    $( this ).droppable( "option", "disabled", false );
                    console.log('hi')
                },
                drop: function( event, ui ) {
                    $( this ).droppable( "option", "disabled", true );
                }
        });

         $("#trash2").droppable({
                out: function() {
                    $( this ).droppable( "option", "disabled", false );
                    console.log('hi')
                },
                drop: function( event, ui ) {
                    $( this ).droppable( "option", "disabled", true );
                }
        });
});

這是小提琴： http : //jsfiddle.net/vMQVy/120/

有人知道如何克服這個問題嗎？

Answer 1

• 當您將可拖動對象放置到可放置區域時，將觸發“放下”事件
• 當可拖動對象位於可放置區域上方但離開該可放置區域而不被放置時，甚至觸發“ out”。 這是“過度”的相反事件。

因此，在您的示例中，使用“ out”事件不是實現該目標所要做的。

據我所知，在將對象拖放到可放置區域之前，您不知道它在哪里。

我使用的解決方案是每次將項目放在可放置區域中時都存儲它的位置。 這樣，每次放下一個項目時，您都要檢查它之前是否在另一個垃圾箱中，如果是，則重新啟用另一個垃圾箱。