Санитизация данных

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

Подключение и инициализация

Dragula распространяется как через npm, так и через CDN. После подключения необходимо создать экземпляр Dragula, передав в конструктор массив контейнеров, элементы которых будут перемещаемыми.

import dragula from 'dragula';

const containers = [document.getElementById('container1'), document.getElementById('container2')];
const drake = dragula(containers);

Ключевые моменты:

  • Массив контейнеров может быть любым числом.
  • Элементы внутри контейнеров автоматически становятся перетаскиваемыми.
  • Порядок элементов в DOM изменяется моментально при переносе.

Настройки 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
});
  • moves(el, source, handle, sibling) — возвращает true, если элемент можно перетаскивать. handle позволяет задать область, с которой можно перетаскивать элемент.
  • accepts(el, target, source, sibling) — возвращает true, если элемент можно разместить в контейнере target.
  • copy — если true, при перетаскивании создается копия элемента вместо перемещения.
  • revertOnSpill — если true, элемент возвращается на исходное место при отпускании вне контейнера.

События Dragula

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

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

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

drake.on('drop', (el, target, source, sibling) => {
    console.log(`Элемент ${el.textContent} перемещён из ${source.id} в ${target.id}`);
});

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

  • События срабатывают синхронно при изменении DOM.
  • Можно комбинировать с пользовательскими функциями для обновления состояния приложения или сохранения данных на сервере.

Копирование и удаление элементов

Dragula позволяет управлять копированием элементов и их удалением вне контейнеров. Это полезно для создания интерфейсов типа «перетаскивание из библиотеки элементов» или «перетаскивание с удалением».

const drake = dragula(containers, {
    copy: true,
    removeOnSpill: true
});
  • copy: true — при перетаскивании исходный элемент остаётся на месте.
  • removeOnSpill: true — если элемент отпущен вне контейнера, он удаляется.

Работа с DOM и структурой элементов

Dragula напрямую манипулирует DOM, что обеспечивает простоту и скорость, но требует внимательности:

  • Элементы должны быть корректно вложены в контейнеры.
  • Перетаскивание переносит сам DOM-узел, а не его копию (если copy: false).
  • Взаимодействие с другими библиотеками, изменяющими DOM, требует синхронизации.

Практические рекомендации

  • Использовать handle для сложных интерфейсов, чтобы избежать случайных перетаскиваний.
  • Ограничивать accepts, если необходимо запрещать перемещение между определёнными контейнерами.
  • Обрабатывать события drop для обновления внутреннего состояния приложения.
  • Следить за производительностью, если контейнер содержит большое количество элементов — Dragula оперирует напрямую с DOM и может замедляться при сотнях элементов.

Совместимость и расширяемость

Dragula совместим с современными браузерами и не зависит от фреймворков. Его можно интегрировать с React, Vue или Angular, но потребуется управлять синхронизацией состояния компонентов с DOM-изменениями Dragula. Для сложных интерфейсов рекомендуется использовать отдельный слой состояния, а Dragula использовать только для визуального перетаскивания.

Стилизация элементов

Dragula добавляет классы .gu-transit и .gu-mirror для перетаскиваемого элемента и его копии. Это позволяет создавать анимации и эффекты:

.gu-mirror {
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.gu-transit {
    opacity: 0.5;
}

Ключевые моменты стилизации:

  • .gu-mirror — визуальная копия элемента во время перетаскивания.
  • .gu-transit — оригинальный элемент в процессе перетаскивания.
  • Можно комбинировать с CSS-переходами для плавной анимации.
Оглавление