jQuery UI - программно перемещать перетаскиваемый переносимый на другой «доступный» droppable

Question

У меня есть элемент управления мини-формы, где я перетаскиваю несколько перетаскиваемых объектов на шкалу. См my plunk

В идеале, каждый раз, когда я падаю перетаскиваемый, я хотел бы сделать в stop(event, ui) метода:

1. проверить, если Droppable уже имеет перетаскиваемым (назовем его draggable2)
2. если есть draggable2, я хотел бы, чтобы просмотреть мои droppables тот, который не имеет перемещаемые
3. затем перейти draggable2 к этому сбрасываемой

ли т здесь API/способы сделать это программно? Я знаю, это звучит похоже на sortables, но я строго ищу возможность

двигаться перетаскиваемым к Droppable

и

знать, если droppable уже имеет перетаскиваемый и сможет идентифицировать перетаскиваемый

Любая помощь будет принята с благодарностью. Спасибо.

Answer 1

Я нашел способ выполнить это. Хотя нет никаких параметров в API-интерфейсе jQuery для перетаскивания/droppables, мне удалось отслеживать перетаскиваемые и droppables, добавляя уникальные атрибуты «id» для их отслеживания.

Вот как я подошел следующее:

движения перетаскиваемого к сбрасываемому

Моего подходу: Найти координаты цели сбрасываемой, и обновить CSS из перетаскиваемых ,

Чтобы выяснить, какие Dragger тянули и который капельница получила его, я добавил атрибуты dragger-id и dropper-id, чтобы я мог определить их в случае падения:

drop: function(event, ui){ 
    // Get the current dragger and dropper ID's 
    dropperId = $(this).attr('dropper-id'); 
    draggerId = ui.draggable.attr('dragger-id'); 

    // ... more code 
} 

я рассчитал верхние и левые координаты для dragger на основе значений droppable. Для этого я использовал метод jQuery offset().

drop_x = $('.droppable').offset().left - $('.draggable').offset().left; 
drop_y = $('.droppable').offset().top - $('.draggable').offset().top; 

Примечание: Мне пришлось делать расчет разницы, так как перетаскиваемые позиции расположены относительно того места, где они начинаются.

Наконец, я установил значение top и left CSS:

ui.draggable.css('top', drop_y+'px'); // y-axis 
ui.draggable.css('left', drop_x+'px'); // x-axis 

---

знать, если Droppable уже имеет перетаскиваемый, и быть в состоянии идентифицировать перетаскиваемую

Для этого я создал еще один атрибут на отбрасываемых элементах для отслеживания dragger-id значений. Я назвал его current-dragger так, чтобы он был уникальным, и я мог запросить его. Я использовал -1 в качестве значения по умолчанию, что означает «нет перетаскивания».

Я назначил current-dragger в капельном методе, а также:

drop: function(event, ui){ 
    // Get the current dragger and dropper ID's 
    dropperId = $(this).attr('dropper-id'); 
    draggerId = ui.draggable.attr('dragger-id'); 

    // Remove current-dragger value from old dropper (-1 means no dragger) 
    $('[current-dragger="' + draggerId + '"]').attr('current-dragger', '-1'); 

    // Update current-dragger on this dropper 
    $(this).attr('current-dragger', draggerId); 

    // ... more code 
} 

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

Полный рабочий пример, see my updated plunk