Что такое Dragula

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

Ключевые возможности библиотеки:

  • Перетаскивание элементов между контейнерами с сохранением структуры DOM.
  • Автоматическое управление классами CSS при начале, процессе и завершении перетаскивания.
  • Поддержка сенсорных устройств через тач-события.
  • Функция отмены действий (revert), позволяющая вернуть элемент в исходное положение при необходимости.
  • Высокая производительность и минимальный вес библиотеки, что делает её подходящей для проектов любой сложности.

Установка и подключение

Dragula может быть подключена как через пакетный менеджер npm/yarn, так и через прямое подключение скрипта.

Через npm:

npm install dragula

Импорт в проект:

import dragula from 'dragula';
import 'dragula/dist/dragula.css';

Через CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.js"></script>

После подключения Dragula готова к использованию с любыми контейнерами DOM.

Инициализация Dragula

Для работы с библиотекой необходимо указать контейнеры, между которыми будет происходить перетаскивание.

const container1 = document.getElementById('container1');
const container2 = document.getElementById('container2');

const drake = dragula([container1, container2]);

Пояснения:

  • Аргументом конструктора dragula() является массив контейнеров, элементы которых можно перемещать.
  • Если контейнеров несколько, Dragula автоматически позволяет перетаскивать элементы между ними.
  • Каждый контейнер может содержать любое количество элементов DOM, включая вложенные.

Настройки и опции

Dragula предоставляет гибкие опции для тонкой настройки поведения перетаскивания:

  • moves — функция, определяющая, может ли элемент быть перемещен:
moves: (el, source, handle, sibling) => {
    return handle.classList.contains('handle');
}
  • accepts — функция, определяющая, можно ли помещать элемент в определенный контейнер:
accepts: (el, target, source, sibling) => {
    return target.id !== 'container3';
}
  • copy — позволяет копировать элементы вместо их перемещения:
copy: true
  • revertOnSpill — возвращает элемент в исходное место, если он отпущен вне контейнера:
revertOnSpill: true
  • removeOnSpill — удаляет элемент, если он отпущен вне контейнера:
removeOnSpill: true

Эти опции можно комбинировать для создания сложной логики drag-and-drop без ручной обработки событий.

События Dragula

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

  • drag — начало перетаскивания.
  • dragend — завершение перетаскивания.
  • drop — успешное размещение элемента в новом контейнере.
  • cancel — отмена перетаскивания.
  • over — элемент находится над контейнером.
  • out — элемент покинул контейнер.

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

drake.on('drag', (el) => {
    el.classList.add('is-dragging');
});

drake.on('drop', (el, target, source, sibling) => {
    el.classList.remove('is-dragging');
    console.log(`Элемент перемещен в контейнер ${target.id}`);
});

Стилизация перетаскивания

Dragula автоматически добавляет классы CSS для управления визуальными эффектами:

  • .gu-transit — элемент в процессе перетаскивания.
  • .gu-mirror — копия элемента, которая следует за курсором.
  • .gu-hide — скрывает оригинальный элемент во время перетаскивания.
  • .gu-unselectable — предотвращает выделение текста при перетаскивании.

Благодаря этим классам можно легко настроить визуальные эффекты без изменения логики JavaScript.

Работа с динамическими элементами

Dragula поддерживает работу с динамически добавленными элементами. Если элементы создаются после инициализации, достаточно просто удостовериться, что они находятся в контейнере Dragula. Дополнительных действий по подписке на события не требуется, так как библиотека отслеживает изменения DOM контейнера в реальном времени.

Интеграция с фреймворками

Dragula легко интегрируется с популярными фронтенд-фреймворками:

  • React — контейнеры и элементы управляются через refs, события Dragula можно обрабатывать через useEffect.
  • Vue — можно использовать директивы и реактивные свойства для синхронизации состояния элементов с перемещением.
  • Angular — контейнеры связываются через ViewChild, события Dragula подписываются через сервисы.

Библиотека не зависит от конкретного фреймворка и обеспечивает одинаковое поведение в чистом JS и в компонентах.

Примеры сложных сценариев

  1. Сортировка внутри контейнера: Dragula позволяет перетаскивать элементы в пределах одного контейнера и автоматически переставлять их порядок.

  2. Перетаскивание с ограничениями: Можно запретить перемещение некоторых элементов или ограничить их к определенным контейнерам.

  3. Копирование элементов: Настройка опции copy: true позволяет создавать дубликаты элементов вместо перемещения.

  4. Динамическая адаптация: Через события over и out можно менять стиль контейнеров и подсвечивать допустимые зоны для перетаскивания.

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

Оглавление