Стандартные классы Dragula

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

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

import dragula from 'dragula';

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

dragula([container1, container2]);

В этом примере создаются два контейнера, между которыми элементы можно перетаскивать. Dragula автоматически добавляет обработчики событий для dragstart, drag, dragend, drop.

Стандартные классы и стилизация элементов

Dragula использует набор стандартных CSS-классов, которые применяются к элементам во время перетаскивания. Основные классы:

  • gu-transit — присваивается элементу в момент, когда начинается перетаскивание. Используется для изменения внешнего вида элемента во время его перемещения.
  • gu-mirror — создается зеркальное отображение перетаскиваемого элемента. Этот элемент визуально следует за курсором мыши и исчезает после завершения drag.
  • gu-hide — временно скрывает оригинальный элемент на время перетаскивания.
  • gu-unselectable — предотвращает выделение текста при перетаскивании.
  • gu-over — применяется к контейнеру, когда в него помещается перетаскиваемый элемент.
  • gu-trying — класс для обозначения элемента, когда он пытается быть перетащенным в контейнер, в который по правилам перетаскивания попасть нельзя.

Пример использования классов через CSS:

.gu-mirror {
    background-color: rgba(0, 0, 0, 0.1);
    border: 2px dashed #333;
    opacity: 0.8;
}

.gu-transit {
    opacity: 0.5;
}

.gu-over {
    background-color: #f0f0f0;
}

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

Методы и события Dragula

Dragula предоставляет ряд методов и событий, которые позволяют контролировать поведение drag-and-drop и взаимодействовать с DOM:

Методы

  • dragula(containers, options) — основной конструктор, принимающий массив контейнеров и объект настроек.
  • drake.containers — возвращает массив контейнеров, с которыми работает Dragula.
  • drake.start(item) — программно начинает перетаскивание элемента.
  • drake.end() — завершает текущее перетаскивание.
  • drake.remove() — удаляет перетаскиваемый элемент из контейнера.
  • drake.cancel() — отменяет текущее перетаскивание, возвращая элемент в исходное место.

События

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

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

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

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

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

Настройка стандартных опций

Dragula позволяет гибко настраивать поведение перетаскивания через объект options:

  • moves — функция, определяющая, можно ли перетаскивать элемент. Возвращает true или false.
  • accepts — функция, определяющая, можно ли помещать элемент в определенный контейнер.
  • copy — если true, элемент копируется вместо перемещения.
  • revertOnSpill — если true, элемент возвращается в исходное место при неудачной попытке drop.
  • removeOnSpill — если true, элемент удаляется при попытке сбросить его вне контейнеров.
  • direction — направление перемещения (‘vertical’ или ‘horizontal’).
  • invalid — функция для исключения определенных элементов из перетаскивания.

Пример:

const drake = dragula([container1, container2], {
    copy: false,
    revertOnSpill: true,
    moves: (el, source, handle, sibling) => handle.classList.contains('handle')
});

Здесь перетаскивание возможно только при захвате элемента за handle, и элементы возвращаются на исходное место, если их бросают за пределы контейнеров.

Взаимодействие с DOM

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

  • Добавление элементов — новые элементы автоматически подхватываются, если их добавлять в контейнер после инициализации Dragula.
  • Удаление элементов — можно удалять элементы через события или метод remove().
  • Клонирование — при использовании опции copy создается новый элемент, а оригинал остается на месте.

Пример клонирования элементов:

const drake = dragula([container1, container2], {
    copy: true
});

drake.on('cloned', (clone, original, type) => {
    console.log('Создан клон элемента', clone);
});

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

  • Использовать gu-mirror и gu-transit для анимации и визуальной обратной связи.
  • Применять gu-over для подсветки контейнера при наведении.
  • Настраивать CSS отдельно, чтобы поддерживать единый стиль элементов в разных состояниях.
  • Комбинировать стандартные классы с пользовательскими для реализации сложных интерфейсов, например, с drag handle или ограничением перемещения.

Совместимость и производительность

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

Особое внимание стоит уделить большому количеству элементов в контейнерах: чем больше элементов, тем внимательнее нужно следить за производительностью CSS-анимаций и обработчиков событий.

Оглавление