Полный список методов

Dragula — это легковесная библиотека для реализации drag-and-drop интерфейсов в JavaScript. Для её использования требуется подключение как CSS, так и JS файлов. Можно воспользоваться 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 происходит вызовом функции dragula(containers, options).

  • containers — массив DOM-элементов, между которыми разрешено перемещение элементов.
  • options — объект с настройками поведения:
const drake = dragula([container1, container2], {
    moves: (el, source, handle, sibling) => true,
    accepts: (el, target, source, sibling) => true,
    copy: false,
    revertOnSpill: false,
    removeOnSpill: false
});

Основные опции:

  • moves(el, source, handle, sibling) — функция, определяющая, можно ли перемещать элемент.
  • accepts(el, target, source, sibling) — функция, определяющая, разрешено ли вставлять элемент в контейнер target.
  • copy — если true, элемент копируется при перетаскивании.
  • revertOnSpill — если true, элемент возвращается на место, если его сбросили вне контейнера.
  • removeOnSpill — если true, элемент удаляется при сбросе вне контейнера.

Методы экземпляра Dragula

Экземпляр, возвращаемый функцией dragula, предоставляет полный набор методов для управления поведением drag-and-drop.

1. drake.containers

Свойство, содержащее массив всех контейнеров, в которых разрешено перетаскивание. Можно динамически добавлять или удалять контейнеры:

drake.containers.push(newContainer);

2. drake.start()

Запускает отслеживание перетаскивания. Полезно, если нужно временно отключить drag-and-drop.

3. drake.end()

Принудительно завершает текущее перетаскивание. Любой элемент, находящийся в процессе перемещения, будет сброшен в контейнер в зависимости от опций revertOnSpill и removeOnSpill.

4. drake.cancel([item])

Отменяет текущее перетаскивание. Если передан item, отменяется только этот элемент, иначе отменяется текущее перетаскивание любого элемента.

5. drake.remove()

Удаляет текущий перетаскиваемый элемент из DOM. Используется при включенной опции removeOnSpill.

6. drake.destroy()

Полностью удаляет все привязки Dragula и очищает все события. Экземпляр перестает работать после вызова.

7. drake.on(event, callback)

Регистрация обработчиков событий. Dragula поддерживает следующие события:

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

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

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

8. drake.off(event, callback)

Удаляет ранее зарегистрированный обработчик события.

9. drake.emit(event, ...args)

Программно вызывает событие Dragula, передавая аргументы args обработчикам.

10. drake.containers.splice(index, 1)

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

11. drake.clone(item)

Создаёт копию элемента. Используется при включённой опции copy для создания дубликатов при перетаскивании.

12. drake.dragging

Булевое свойство. Истина, если в данный момент происходит перетаскивание.

Использование методов для динамических интерфейсов

Dragula поддерживает динамическое управление элементами и контейнерами.

  • Добавление контейнера в любой момент:
drake.containers.push(document.querySelector('#newContainer'));
  • Удаление контейнера:
const index = drake.containers.indexOf(containerToRemove);
if (index !== -1) drake.containers.splice(index, 1);
  • Включение и выключение drag-and-drop без разрушения экземпляра:
drake.end(); // временно отключает перемещение
drake.start(); // включает обратно
  • Отмена перетаскивания для отдельного элемента:
drake.cancel(item);
  • Программное удаление элемента, сброшенного вне контейнера:
if (drake.removeOnSpill) {
    drake.remove();
}

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

События Dragula предоставляют подробную информацию о процессе перемещения. Ключевые моменты:

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

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

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

Оглавление