Установка и подключение

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

Установка через npm или yarn

Dragula поддерживает установку через менеджеры пакетов, что упрощает интеграцию в современные проекты.

Через npm:

npm install dragula

Через yarn:

yarn add dragula

После установки файлы библиотеки будут находиться в папке node_modules/dragula. Основные модули для использования:

dragula.js — основной скрипт библиотеки.
dragula.css — базовые стили для корректного отображения элементов во время перетаскивания.

Подключение в проект

Подключение через ES-модули

Если проект использует современную сборку (Webpack, Vite, Parcel), подключение Dragula осуществляется через импорт:

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

dragula — объект, предоставляющий методы для инициализации и управления drag-and-drop.
'dragula/dist/dragula.css' — CSS-файл, необходимый для корректного визуального отображения перетаскиваемых элементов и контейнеров.

Подключение через теги `<script>` и `<link>`

Для простых страниц без сборки можно использовать CDN-подключение:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.js"></script>

После подключения объект dragula становится доступен в глобальной области видимости и готов к использованию:

const drake = dragula([document.querySelector('#container1'), document.querySelector('#container2')]);

Базовые стили и структура HTML

Для корректной работы Dragula требуется наличие контейнеров с элементами. Контейнер может быть любым блочным элементом, например <div> или <ul>.

<div id="container1" class="container">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
</div>

<div id="container2" class="container">
  <div class="item">Элемент A</div>
  <div class="item">Элемент B</div>
</div>

Базовые CSS-правила для визуального представления перетаскивания:

.container {
  width: 200px;
  min-height: 100px;
  border: 1px solid #ccc;
  margin-right: 20px;
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  background-color: #f9f9f9;
}

.item {
  padding: 8px;
  margin-bottom: 5px;
  background-color: #fff;
  border: 1px solid #ddd;
  cursor: move;
}

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
}

Ключевой момент: класс gu-mirror создаётся библиотекой автоматически для отображения копии перетаскиваемого элемента и не требует ручного добавления в HTML.

Проверка корректности подключения

После подключения Dragula и CSS проверка работы перетаскивания осуществляется простой инициализацией:

dragula([document.getElementById('container1'), document.getElementById('container2')]);

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

отсутствия CSS-файла;
неправильных селекторов контейнеров;
подключения скрипта после попытки инициализации.