Инициализация библиотеки

Dragula — это лёгкая библиотека для реализации drag-and-drop функционала в веб-приложениях. Для работы с ней требуется подключение JavaScript и CSS файлов. Обычно используется один из следующих способов:

  1. Через CDN:
<link rel="stylesheet" href="https://unpkg.com/dragula/dist/dragula.min.css">
<script src="https://unpkg.com/dragula/dist/dragula.min.js"></script>
  1. Через npm:
npm install dragula

И последующее подключение в проекте:

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

После подключения библиотеки можно переходить к её инициализации.

Основы инициализации

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

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

const drake = dragula(containers);

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

  • containers — HTML-элементы, в которых разрешено перетаскивание.
  • drake — объект Dragula, через который управляются события и настройки.

Если контейнеров несколько, перетаскивание можно осуществлять между ними. Если передан один контейнер, элементы можно перемещать только внутри него.

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

При инициализации можно передать объект опций для изменения стандартного поведения:

const drake = dragula(containers, {
    moves: function (el, source, handle, sibling) {
        return handle.classList.contains('handle');
    },
    accepts: function (el, target, source, sibling) {
        return target.id !== 'container3';
    },
    copy: false,
    revertOnSpill: true,
    removeOnSpill: false
});

Разбор ключевых опций:

  • moves(el, source, handle, sibling) — функция, которая определяет, можно ли перемещать элемент.

    • el — элемент, который пытаются перетащить
    • source — контейнер, из которого берётся элемент
    • handle — конкретная часть элемента, с которой начато перетаскивание
    • sibling — следующий элемент в контейнере (может быть null)

  • accepts(el, target, source, sibling) — функция, определяющая, можно ли поместить элемент в целевой контейнер.

  • copy — если true, при перетаскивании создаётся копия элемента.

  • revertOnSpill — возвращает элемент на место, если он был сброшен вне контейнеров.

  • removeOnSpill — удаляет элемент, если он сброшен вне контейнера.

Работа с событиями

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

drake.on('drag', function(el) {
    console.log('Начато перетаскивание', el);
});

drake.on('drop', function(el, target, source, sibling) {
    console.log('Элемент сброшен', el, 'в', target);
});

drake.on('over', function(el, container) {
    console.log('Элемент над контейнером', container);
});

drake.on('out', function(el, container) {
    console.log('Элемент покинул контейнер', container);
});

Список основных событий:

  • drag — начало перетаскивания элемента
  • drop — элемент успешно сброшен в контейнер
  • over — элемент находится над контейнером
  • out — элемент покинул контейнер
  • cancel — перетаскивание отменено
  • cloned — сработало клонирование элемента при copy: true
  • remove — элемент удалён при removeOnSpill: true

Динамическое добавление контейнеров

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

const newContainer = document.getElementById('container3');
drake.containers.push(newContainer);

Также возможно полностью пересоздать набор контейнеров:

drake.containers = [document.getElementById('container1'), newContainer];

Это удобно при работе с динамически создаваемыми списками и секциями на странице.

Настройка внешнего вида при перетаскивании

При инициализации можно добавить классы для визуального контроля:

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

drake.on('drop', function(el) {
    el.classList.remove('is-dragging');
});

Обычно используют отдельный CSS для класса is-dragging, чтобы изменять прозрачность, границу или тень перетаскиваемого элемента.

Использование с фреймворками

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

  • React: контейнеры создаются через ref, передаваемый в dragula([ref.current]).
  • Vue: контейнеры получают через ref или v-for, а события обрабатываются через методы компонента.
  • Angular: подключение Dragula через сервис, а контейнеры указываются через @ViewChild.

Особенность интеграции — управление DOM напрямую, так как Dragula не использует виртуальный DOM.

Поддержка мобильных устройств

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

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

Оглавление