JqueryUI droppable' out'事件没有发生

时间:2016-06-16 16:02:52

标签: javascript jquery html5 drag-and-drop

我有2个droppables和2个draggables。

如果将item1拖到trash1,则无法将item2拖到trash1,它将恢复到其位置。

如果将item1从trash1拖到trash2,则trash1应该再次可用,并且因为' 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/

任何人都知道如何克服这个问题?

1 个答案:

答案 0 :(得分:1)

  • ' drop'将可拖动对象放入可放置区域时会触发事件
  • ' out'当可拖动对象在可放置区域上方但在没有被丢弃的情况下离开此可放置区域时,偶数会被触发。这是" over"。
  • 的相反事件

所以在你的例子中,使用' out'事件不是你必须做的事情。

据我所知,在放入可放置区域之前,您无法知道可拖动对象的位置。

我使用的解决方案是每次将项目放置在可放置区域时存储项目的位置。就像那样,每次丢弃一个项目时,你都会检查它是否在另一个垃圾箱中,如果是,那么你重新启用这个垃圾。