Базовая конфигурация

Библиотека Dragula является легковесным решением для реализации перетаскивания элементов на веб-странице. Для её использования необходимо подключение как JavaScript, так и CSS части. Существует несколько способов установки:

Через CDN:

<link rel="stylesheet" href="https://unpkg.com/dragula/dist/dragula.min.css">
<script src="https://unpkg.com/dragula/dist/dragula.min.js"></script>

Через npm:

npm install dragula

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

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

Инициализация контейнеров

Для работы Dragula требуется указать контейнеры, элементы внутри которых будут перетаскиваться. Контейнер — это любой DOM-элемент, например div или ul.

const containers = [
    document.getElementById('left-container'),
    document.getElementById('right-container')
];

const drake = dragula(containers);

После этого элементы внутри контейнеров становятся перетаскиваемыми.

Основные параметры конфигурации

При создании экземпляра Dragula можно передавать объект опций. Основные ключи:

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

    moves: function(el, source, handle, sibling) {
    return handle.classList.contains('handle');
}

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

    accepts: function(el, target) {
    return target.id !== 'restricted-container';
}

  • copy: если установлено true, элементы будут копироваться вместо перемещения.

    copy: true

  • revertOnSpill: если true, элементы возвращаются в исходное место при отпускании вне контейнера.

    revertOnSpill: true

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

  • direction: задаёт направление перетаскивания: 'vertical' или 'horizontal'. По умолчанию 'vertical'.

  • ignoreInputTextSelection: предотвращает случайное перетаскивание при выделении текста в элементах <input> или <textarea>.

События Dragula

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

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

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

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

Работа с копированием и клонированием

При включённой опции copy Dragula создаёт клонированный элемент, который можно перемещать. При этом исходный элемент остаётся на месте. Если требуется модифицировать клонированный элемент:

drake.on('cloned', function(clone, original, type) {
    clone.style.backgroundColor = 'lightblue';
});

Ограничение перетаскивания по типу элемента

Иногда необходимо позволить перемещать только определённые элементы. Для этого используется опция moves:

moves: function(el, source, handle, sibling) {
    return el.tagName === 'LI'; // только элементы списка
}

Дополнительно можно задать класс для «хвата» (handle) внутри элемента, чтобы перемещать его только при взаимодействии с конкретной частью.

Настройка поведения при отпускании вне контейнера

Два ключевых параметра: revertOnSpill и removeOnSpill. Их логика различается:

  • revertOnSpill: true — элемент возвращается на исходное место.
  • removeOnSpill: true — элемент удаляется.

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

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

Работа с несколькими контейнерами

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

accepts: function(el, target) {
    return target.classList.contains('droppable');
}

Это предотвращает попадание элементов в контейнеры, где их быть не должно.

Закрепление порядка элементов

Dragula сохраняет порядок DOM-элементов после перетаскивания, что упрощает дальнейшую обработку данных на стороне клиента. Чтобы получить актуальный порядок:

const items = Array.from(document.getElementById('left-container').children);

Можно использовать это для сохранения состояния на сервере через AJAX.

Взаимодействие с формами и динамическим контентом

Dragula корректно работает с элементами, добавленными динамически через JavaScript, если контейнер уже был инициализирован. Для этого достаточно обновить DOM без переинициализации Dragula. В случае добавления новых контейнеров необходимо вызвать drake.containers.push(newContainer).

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

Оглавление