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

这是 fiddle :http://jsfiddle.net/vMQVy/120/

有人知道如何解决这个问题吗？

Answer 1

• 当您将可拖动对象放入可放置区域时，会触发“drop”事件
• 当可拖动对象位于可放置区域上方但未放置而离开此可放置区域时，甚至会触发“out”。这是“over”的相反事件。

因此，在您的示例中，使用“out”事件并不是实现这一目标所需要做的事情。

据我所知，您无法知道可拖动对象在被放入可放置区域之前来自哪里。

我使用的解决方案是每次将项目放置在可放置区域时存储该项目的位置。这样，每次删除一个项目时，您都会检查它之前是否在另一个垃圾箱中，如果是，则重新启用另一个垃圾箱。