Question

我有两个可放置的div，它们在屏幕上非常接近（注意：它们不是嵌套的）。一个大的可拖动div被拖到两个div之上;当鼠标被释放时，拖拽正好落在两个可放弃的div上（即两个可放弃的事件被触发）。

我想要发生的是，在这种情况下，可拖动的将落在只有一个可放置的，而不是其他的。订单无关紧要。

这样做的最佳方式是什么？

我想到的一种低效方法是跟踪所有可放置的事件时间戳，如果它具有之前已存储在某个数组中的时间戳，则拒绝可放置事件。

Answer 1

您可以在droppable元素上使用'data'方法来存储对目前为止已接受的可拖动对象的引用。所以，例如，你可以这样做：

<script language="javascript">
$(function() {
    $('.droppable').droppable({
        greedy:true,
        [...other:options],
        over: function(event,ui) {
            var already_dragged = $(this).data('mysite.dropped_items');
            if($.inArray(ui.draggable.id,already_dragged) >= 0) {
                $(this).droppable('disable');
            }
        },
        out: function(event,ui) {
            $(this).droppable('enable');
        },
        drop: function(event,ui) {
            var already_dragged = $(this).data('mysite.dropped_items');
            if($.inArray(ui.draggable.id,already_dragged) < 0) {
                already_dragged.push(ui.draggable.id);
                $(this).data('mysite.dropped_items',already_dragged);
            }
        }
    }).data('mysite.dropped_items',new Array());
});
</script>

<div id="droppable1" class="droppable"></div>
<div id="droppable2" class="droppable"></div>
<div id="draggable_1" class="draggable"></div>

基本上这是做什么......

我们使用jQuery数据对象将一个名为'mysite.dropped_items'的数组附加到每个$（'。droppable'）元素。每次你将一个可拖动悬停在这些droppable中的一个上，系统将检查该droppable的id是否已经在其'mysite.dropped_items'数组中。如果是，则droppable将被禁用。如果不是，一切都会按预期工作。

我没有测试过这个确切的代码块，但从理论上讲，它应该可行。我希望有所帮助。

Answer 2

我能够以稍微不同的方式解决我的问题。让我先回顾一下我的情况：

我有两个可放置的div对象，它们在屏幕上非常接近
我有一个可拖动的div，它没有唯一的ID。这个可拖动的东西可以一次又一次丢弃在我的droppables上（即，如果有任何意义的话，它不会被消耗掉）
当一个draggable位于两个droppables之上时，目前jquery行为是draggable将同时击中两个droppables。这对我来说是一种不受欢迎的影响。

我预期的行为：draggable应该只落在第一个droppable上，并且不应该被触发任何其他后续的droppable。

var tsArray = new Array（）;

$（ '可投放'）。可投放（{ drop：function（）{

for (var i = 0; i < tsArray.length; i++) {
    if (tsArray[i] + 150 > ev.timeStamp) {
        return;
    } 
}

tsArray.length = 0; // Empty it for performance
tsArray.push(ev.timeStamp);

// Do any logic you require here

}）;

基本思想是当两个droppable上的draggable被删除时，每个droppable事件的事件timeStamp彼此非常接近。它们相差几毫秒。我只是做一个检查，以确保它们之间存在很大的时间差异。

Answer 3

您只需在您的droppable中指定OVER，OUT事件，即可禁用其他droppable。

就像让我们说的那样，drop1和drop2在DOM上是无关的，但在彼此的顶部，你的drop1拖到它们上面。你可以简单地访问drop1的OVER，OUT和函数（如果这是优先的那个）并且执行OVER：禁用drop2，OUT：enable drop2

伪代码，但我想你会知道它在jquery中是如何工作的。

只能在贪婪的droppable上拖拽一次

3 个答案: