Можно перетаскивать один раз только на жадных сбрасываемых

Question

У меня есть два сбрасываемых элемента div, которые расположены очень близко друг к другу на экране (примечание: они не являются вложенными). Большой перетаскиваемый div перетаскивается поверх двух div; когда мышь отпущена, перетаскиваемый объект попадает на оба сбрасываемых дива (т.е. запускаются два сбрасываемых события).

Я бы хотел, чтобы в этом сценарии перетаскиваемый объект упал на только на одну и на другую. Заказ не имеет значения вообще.

Как лучше всего это сделать?

Один неэффективный способ, который мне пришёл в голову, - это отслеживать все метки времени сбрасываемого события и отклонять событие сбрасывания, если оно имеет метку времени, которая уже была сохранена ранее в каком-либо массиве.

Answer 1

Я смог решить мою проблему немного по-другому. Позвольте мне сначала напомнить, что моя ситуация снова:

1. У меня есть два объекта div, которые можно сбрасывать, которые очень близко расположены друг к другу на экране
2. У меня есть перетаскиваемый div, у которого нет уникального идентификатора. Этот перетаскиваемый объект можно снова и снова бросать на мои предметы для сбрасывания (т. Е. Он не расходуется, если это имеет смысл)
3. Когда перетаскиваемый объект находится над двумя объектами сброса, в настоящее время поведение jquery заключается в том, что перетаскиваемый элемент попадет в оба элемента сброса. Это нежелательный эффект для меня.

4. Мое ожидаемое поведение: перетаскиваемый объект должен падать только на первый элемент сброса и не должен запускаться для любого другого последующего элемента сброса, который находится вокруг.

   var tsArray = new Array ();

   $ ( 'Droppable'). Droppable ({ 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   
   

   });

Основная идея состоит в том, что, когда перетаскиваемый объект отбрасывается на два сбрасываемых объекта, временная метка события каждого сбрасываемого события очень близка друг к другу. Они в миллисекундах друг от друга. Я просто проверяю, есть ли между ними существенная разница во времени.

Answer 2

Вы можете просто назначить в своих событиях OVER, OUT в свой дескриптор, чтобы отключить другие дескрипторы.

вроде, скажем, drop1 и drop2 не связаны с DOM, но друг над другом, и ваш drop1 drag1 на них. Вы можете просто получить доступ к функциям OVER, OUT, drop1 (если это тот, который имеет приоритет) и сделать OVER: отключить drop2, OUT: включить drop2

псевдокод, но я думаю, вы узнаете, как он работает в jquery.

Answer 3

Вы можете использовать метод «data» в элементах droppable, чтобы сохранить ссылку на перетаскиваемые объекты, которые они приняли до сих пор. Так, например, вы можете сделать что-то вроде этого:

<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'). Каждый раз, когда вы наводите курсор мыши на один из этих предметов, система будет проверять, есть ли идентификатор этого предмета в своем массиве «mysite.dropped_items». Если это так, то сброс будет отключен. Если это не так, все будет работать как положено.

Я не тестировал этот точный блок кода, но теоретически он должен работать. Я надеюсь, что это помогает.