Константы и перечисления

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

Инициализация и базовое использование

Для создания области перетаскивания используется функция dragula(). В качестве аргумента передается массив контейнеров, элементы которых будут доступны для перетаскивания:

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

После этого все элементы внутри указанных контейнеров становятся «перетаскиваемыми». Dragula автоматически добавляет необходимые слушатели событий для управления переносом.

Настройка поведения через опции

Библиотека Dragula поддерживает конфигурирование поведения через объект опций при инициализации:

const drake = dragula(containers, {
    moves: (el, source, handle, sibling) => handle.classList.contains('handle'),
    accepts: (el, target, source, sibling) => !target.classList.contains('no-drop'),
    copy: false,
    revertOnSpill: true,
    removeOnSpill: false,
});
  • moves(el, source, handle, sibling) — функция, определяющая, можно ли перетаскивать элемент. Параметр handle позволяет реализовать перетаскивание только при захвате за определенную область.
  • accepts(el, target, source, sibling) — определяет, может ли элемент быть помещен в конкретный контейнер.
  • copy — если true, элемент копируется, а не перемещается.
  • revertOnSpill — возвращает элемент на исходное место при «вываливании» за пределы контейнера.
  • removeOnSpill — удаляет элемент при вываливании, если установлено true.

Константы и перечисления в Dragula

Dragula не использует традиционные перечисления (enum) из TypeScript или других языков, но поддерживает ряд строковых констант, которые определяют типы событий и состояния элементов. Основные из них:

  • drag — событие начала перетаскивания.
  • dragend — завершение перетаскивания.
  • drop — успешная установка элемента в контейнер.
  • cancel — отмена перетаскивания, например при вызове drake.cancel().
  • remove — удаление элемента через «spill».
  • shadow — отображение визуального «тени» перетаскиваемого элемента.

Пример подписки на события:

drake.on('drag', (el) => {
    el.style.opacity = '0.5';
});

drake.on('drop', (el, target, source, sibling) => {
    el.style.opacity = '';
});

drake.on('remove', (el, container) => {
    console.log(`Элемент удален из контейнера ${container.id}`);
});

Методы для управления перетаскиванием

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

  • drake.start(el) — принудительно инициирует перетаскивание элемента.
  • drake.end() — завершает текущее перетаскивание.
  • drake.cancel() — возвращает элемент на исходное место.
  • drake.remove() — удаляет элемент, аналогично действию «spill».
  • drake.destroy() — отключает все слушатели и полностью деинициализирует Dragula для контейнеров.

Эти методы обеспечивают точный контроль над состоянием элементов и контейнеров в процессе перетаскивания.

Управление контейнерами и элементами

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

drake.containers.push(document.getElementById('new-container'));

Также доступно управление списком элементов через объект drake.models, что полезно при интеграции с фреймворками и сохранении состояния в базе данных.

События для сложной логики

Dragula поддерживает следующие события, которые можно рассматривать как «перечисления событий»:

  • over — элемент наведен на контейнер.
  • out — элемент покинул контейнер.
  • cloned — создается копия элемента при включенном copy: true.
  • shadow — визуальная тень элемента во время перетаскивания.

Использование этих событий позволяет реализовать гибкие сценарии с анимацией, ограничением зон и сохранением последовательности элементов.

Работа с визуальными эффектами

Dragula автоматически добавляет класс .gu-transit для элемента, находящегося в процессе перетаскивания, и .gu-mirror для его копии, если используется режим копирования. Это позволяет легко настраивать CSS-анимации и стили для перетаскиваемых элементов.

Практическое применение констант и событий

Использование констант Dragula и подписка на события обеспечивает предсказуемое поведение элементов в интерфейсе. Комбинируя методы, параметры и события, можно реализовать:

  • Перетаскивание между несколькими контейнерами.
  • Копирование элементов при переносе.
  • Ограничение действий по типу контейнера или класса элемента.
  • Управление порядком элементов и их визуальной презентацией.

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

Оглавление