Создание первого контейнера

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

Подключение Dragula

Для начала необходимо подключить библиотеку. Dragula доступна через CDN или пакетный менеджер npm/yarn.

Через 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

В JavaScript-файле импорт:

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

Подготовка HTML-контейнера

Контейнер — это элемент, содержащий draggable-элементы. Dragula работает с любыми элементами DOM. Простейший пример структуры:

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

Каждый дочерний элемент <div class="item"> становится потенциально перетаскиваемым объектом.

Инициализация Dragula

Для создания контейнера Dragula используется функция dragula(). Она принимает массив контейнеров:

const container = document.getElementById('container');
dragula([container]);

После инициализации элементы внутри контейнера становятся draggable. Dragula автоматически добавляет необходимые события mousedown, mousemove и mouseup, чтобы обеспечить перетаскивание.

Настройка опций

Dragula предоставляет гибкие опции для управления поведением перетаскивания:

  • copy — определяет, создается ли копия элемента при перетаскивании.
  • moves — функция, которая решает, может ли конкретный элемент быть перетаскиваемым.
  • accepts — функция, которая проверяет, можно ли перемещать элемент в целевой контейнер.
  • removeOnSpill — удаляет элемент при сбросе его за пределы контейнера.

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

dragula([container], {
    copy: false,
    moves: function (el, source, handle, sibling) {
        return el.classList.contains('item');
    },
    accepts: function (el, target, source, sibling) {
        return true; // разрешаем перетаскивать в любой контейнер
    },
    removeOnSpill: false
});

События Dragula

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

  • drag — срабатывает при начале перетаскивания.
  • drop — при окончании перетаскивания.
  • over — когда элемент входит в контейнер.
  • out — когда элемент покидает контейнер.
  • cancel — отмена перетаскивания.
  • remove — удаление элемента, если removeOnSpill включен.

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

const drake = dragula([container]);

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

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

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

Dragula добавляет классы в процессе drag-and-drop:

  • .gu-mirror — зеркальный элемент, который перемещается по экрану.
  • .gu-transit — элемент, находящийся в процессе перетаскивания.
  • .gu-unselectable — предотвращает выделение текста.

С помощью CSS можно настроить визуальные эффекты, например:

.item {
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    cursor: grab;
}

.gu-mirror {
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    opacity: 0.9;
}

Контейнеры с несколькими зонами

Dragula поддерживает несколько контейнеров, между которыми можно перемещать элементы:

<div id="left-container">
    <div class="item">A</div>
    <div class="item">B</div>
</div>

<div id="right-container">
    <div class="item">1</div>
    <div class="item">2</div>
</div>

Инициализация:

const left = document.getElementById('left-container');
const right = document.getElementById('right-container');

dragula([left, right]);

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

Вывод

Создание первого контейнера с Dragula сводится к подключению библиотеки, определению HTML-контейнера, инициализации через dragula() и, при необходимости, настройке опций и подписке на события. Этот процесс обеспечивает простое, но мощное решение для добавления drag-and-drop функционала в веб-интерфейсы.

Оглавление