drake.on() - подписка на события

Метод drake.on() является ключевым механизмом подписки на события в библиотеке Dragula. Он позволяет отслеживать различные действия пользователя с перетаскиваемыми элементами и реагировать на них программно. drake — это объект, возвращаемый функцией dragula(), который инкапсулирует всю логику перетаскивания.

Синтаксис

drake.on(event, callback)
  • event — строка, обозначающая тип события, на которое происходит подписка.
  • callback — функция обратного вызова, выполняемая при наступлении события. Сигнатура функции зависит от типа события.

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

Dragula поддерживает несколько ключевых событий, на которые можно подписываться через drake.on():

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

    function(el, source) { }
    • el — перетаскиваемый элемент.
    • source — контейнер, из которого был взят элемент.

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

    function(el) { }
    • el — элемент, на котором завершилось перетаскивание.

  3. drop Срабатывает при успешном отпускании элемента в контейнере назначения. Аргументы callback:

    function(el, target, source, sibling) { }
    • el — перемещаемый элемент.
    • target — контейнер, в который элемент помещён.
    • source — контейнер, из которого элемент был взят.
    • sibling — элемент, перед которым был вставлен el, если есть; null, если добавлен в конец.

  4. cancel Вызывается, если перетаскивание было отменено или элемент возвращён в исходное место. Аргументы callback:

    function(el, container, source) { }
    • el — элемент, возвращённый на место.
    • container — текущий контейнер (где элемент оказался).
    • source — исходный контейнер.

  5. over / out Срабатывают при наведении перетаскиваемого элемента на контейнер (over) и при выходе за его пределы (out). Аргументы callback:

    function(el, container) { }
    • el — перетаскиваемый элемент.
    • container — контейнер, над которым элемент находится или покинул его.

  6. shadow Создаёт тень перетаскиваемого элемента, когда он перемещается над контейнером. Аргументы callback:

    function(el, container, source) { }

Примеры использования

const drake = dragula([document.getElementById('left'), document.getElementById('right')]);

// Подписка на начало перетаскивания
drake.on('drag', function(el, source) {
    el.style.opacity = '0.5';
    console.log('Начало перетаскивания:', el, 'Источник:', source);
});

// Подписка на успешный drop
drake.on('drop', function(el, target, source, sibling) {
    el.style.opacity = '';
    console.log('Элемент перемещён:', el, 'Цель:', target, 'Исходник:', source, 'Перед элементом:', sibling);
});

// Подписка на отмену перетаскивания
drake.on('cancel', function(el, container, source) {
    el.style.backgroundColor = '';
    console.log('Перетаскивание отменено для элемента:', el);
});

Особенности и рекомендации

  • Несколько обработчиков на одно событие: Dragula позволяет подписываться на одно событие несколько раз. Все обработчики выполняются в порядке регистрации.
  • Снятие подписки: Чтобы удалить обработчик, используется метод drake.off(event, callback). Важно передавать ту же функцию callback, что была при on().
  • Контекст this: Внутри callback this указывает на объект drake. Это удобно для вызова других методов библиотеки без создания внешних ссылок.
  • Производительность: Для больших списков перетаскиваемых элементов рекомендуется минимизировать сложные вычисления внутри событий drag и drop, чтобы избежать лагов при визуальном перетаскивании.

Расширенные возможности

  • Динамическое изменение классов: В обработчиках событий можно добавлять или удалять CSS-классы элементов и контейнеров, обеспечивая визуальный отклик на действия пользователя.
  • Интеграция с анимациями: Использование requestAnimationFrame внутри событий позволяет плавно анимировать элементы при перемещении или при возврате в исходное положение.
  • Фильтры и ограничения: Через события drag и drop легко реализовать логику ограничения перемещения, например, запрет на перемещение определённых элементов в конкретные контейнеры.

Метод drake.on() является основой взаимодействия с Dragula и обеспечивает полное управление жизненным циклом перетаскивания, делая библиотеку гибкой для различных сценариев веб-разработки.

Оглавление