jQuery UI draggable被丢弃在容器后面的droppable中

Question

我有一个excel网格的droppables和一个孤立的可拖动容器。孤立容器占据屏幕的1/3，位于可放置的Excel网格的顶部，处于固定位置，因此您可以在可放置网格中移动。我将这些项目从孤立容器拖到它后面的可放置桶中。如果我几乎没有在孤儿容器中拖动一个项目，它有时会将它放在可放置的容器后面并插入。有没有办法不这样做，如果它没有移到它之外，就留在孤儿容器中。

下图显示了名为未安排游戏的孤儿容器。如果我几乎没有拖动B1对B2，它会被放在它后面的一个较小的容器中而不是留在孤儿容器中。所以看起来它就消失了。

更新

我注意到我的droppables“drop”事件都被击中了。孤儿容器被击中，然后第二个被击中，第二个接受它。

Answer 1

我通过在可拖动项目中添加一个类并在孤立容器的over / out事件中删除它来修复此问题。

            over: function( event, ui ) {
                $(ui.draggable).addClass('orphan-droppable');
            },
            out: function (event, ui) {
                $(ui.draggable).removeClass('orphan-droppable');
            }

并测试元素是否在网格droppable中有，如果在元素上找到了我忽略它的类。

 drop: function (event, ui) {

                        if (!$(ui.draggable).hasClass('orphan-droppable')) {
// Work on element
}

Answer 2

尝试禁用droppables网格并听取孤立容器上的“out”和“over”事件。当触发输出时，您启用网格，然后再次禁用。