Полный список событий

Dragula — это лёгкая библиотека для реализации drag-and-drop функционала в веб-приложениях на JavaScript. Она предоставляет удобный API для перетаскивания элементов между контейнерами и управления поведением перетаскивания. Одним из ключевых аспектов работы с Dragula является система событий, которая позволяет детально контролировать весь процесс drag-and-drop.

Основные события

События в Dragula делятся на несколько категорий: инициализация перетаскивания, движение элементов, завершение действия и изменения контейнеров. Каждое событие передаёт специфические аргументы, которые дают полное представление о текущем состоянии операции.

1. drag Срабатывает в момент начала перетаскивания элемента.

   • Аргументы: el — элемент, который перетаскивается, source — контейнер, из которого элемент берётся.
   • Используется для добавления кастомных стилей, выделения элемента или логирования начала операции.

2. dragend Срабатывает после завершения перетаскивания, независимо от того, был ли элемент перемещён или возвращён на место.

   • Аргументы: el — элемент, который был перетаскиваемым.
   • Позволяет удалять временные стили и завершать анимации, применённые в drag.

3. drop Происходит, когда элемент был успешно помещён в новый контейнер.

   • Аргументы: el — перемещённый элемент, target — контейнер, в который элемент помещён, source — исходный контейнер, sibling — элемент перед которым вставлен el, или null, если вставка в конец.
   • Позволяет обновлять данные приложения, синхронизировать состояние с сервером или выполнять другие действия после успешного перемещения.

4. over Срабатывает, когда перетаскиваемый элемент нависает над контейнером.

   • Аргументы: el, container, source.
   • Используется для визуальной подсветки контейнера или информирования пользователя о допустимых целях для перемещения.

5. out Срабатывает, когда перетаскиваемый элемент покидает контейнер, над которым он находился.

   • Аргументы: el, container, source.
   • Применяется для отмены подсветки контейнера или для отката временных стилей.

6. cancel Срабатывает, если перетаскивание было отменено, например, если элемент вернулся в исходное положение.

   • Аргументы: el, container, source.
   • Используется для восстановления состояния интерфейса и элементов, которые были изменены при начале перетаскивания.

7. remove Происходит, когда элемент удаляется из контейнера при условии, что Dragula настроен на удаление.

   • Аргументы: el, container, source.
   • Полезно для синхронизации интерфейса и данных после удаления элемента.

Дополнительные события и параметры

Dragula предоставляет ряд вспомогательных событий, которые полезны для сложных сценариев:

• shadow — событие, связанное с визуальным отображением «теневого» элемента, который показывает будущую позицию перетаскиваемого объекта.
• cloned — срабатывает, если включено клонирование элементов при перетаскивании; позволяет работать с копиями элементов без изменения оригинала.

Особенности работы с событиями

• События в Dragula можно подписывать как через объект drake.on(event, handler), так и через цепочку методов при инициализации.
• Все события получают ссылку на элементы и контейнеры, что позволяет напрямую изменять DOM, добавлять классы, манипулировать стилями и управлять порядком элементов.
• События срабатывают синхронно, поэтому любые дорогостоящие операции лучше выполнять с минимальной нагрузкой или асинхронно, чтобы не блокировать интерфейс.

Рекомендации по использованию событий

• Выделение элементов: drag и dragend подходят для визуальных эффектов, таких как изменение цвета рамки или прозрачности.
• Синхронизация данных: drop, remove и cancel позволяют обновлять состояние модели данных после любых изменений DOM.
• Интерактивная подсветка: over и out позволяют показывать пользователю допустимые контейнеры для перемещения.

Каждое событие Dragula предоставляет полный контроль над процессом перетаскивания, позволяя реализовывать как простые списки с drag-and-drop, так и сложные интерфейсы с множественными контейнерами, динамическим добавлением элементов и сохранением состояния.