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”事件不是实现该目标所要做的。

据我所知，在将对象拖放到可放置区域之前，您不知道它在哪里。

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