Создание плагинов

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

Инициализация Dragula осуществляется через создание экземпляра с указанием контейнеров:

const containers = [document.querySelector('#list1'), document.querySelector('#list2')];
const drake = dragula(containers);

Здесь containers — массив HTML-элементов, в которых разрешено перемещение элементов. После создания экземпляра можно подключать обработчики событий, таких как:

  • drag — элемент начал перетаскиваться.
  • drop — элемент был отпущен в контейнере.
  • over — элемент перемещается над контейнером.
  • out — элемент покидает контейнер.
  • cancel — отмена перетаскивания.
  • remove — элемент удален из DOM.
drake.on('drag', (el) => {
    el.style.opacity = '0.5';
});
drake.on('drop', (el, target) => {
    el.style.opacity = '';
});

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

Dragula позволяет гибко настраивать, какие элементы можно перетаскивать, а какие — нет. Для этого используется функция moves, которая возвращает true или false:

const drake = dragula(containers, {
    moves: (el, source, handle, sibling) => {
        return handle.classList.contains('handle');
    }
});

Параметры функции moves:

  • el — перетаскиваемый элемент.
  • source — контейнер, из которого элемент берется.
  • handle — элемент, с которого осуществляется захват.
  • sibling — элемент, перед которым будет вставлен перетаскиваемый элемент.

Также можно управлять разрешением на перенос элементов между контейнерами через accepts:

accepts: (el, target, source, sibling) => {
    return target.id !== 'forbidden';
}

Создание плагинов

Dragula не имеет официального плагин-системы, но предоставляет гибкий API для расширений. Плагин в контексте Dragula — это функция или объект, который подключает дополнительные возможности к существующему экземпляру drake.

Структура плагина

Типичный плагин содержит следующие элементы:

  1. Инициализация — привязка событий Dragula.
  2. Обработчики событий — логика обработки drag, drop, over, out.
  3. Опции плагина — параметры, которые можно передавать при подключении.

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

function highlightPlugin(drake, options = {}) {
    const color = options.color || 'yellow';

    drake.on('over', (el, container) => {
        container.style.backgroundColor = color;
    });

    drake.on('out', (el, container) => {
        container.style.backgroundColor = '';
    });

    return {
        destroy: () => {
            drake.off('over');
            drake.off('out');
        }
    };
}

// Использование
const pluginInstance = highlightPlugin(drake, { color: 'lightblue' });

Управление жизненным циклом

Важно предусматривать очистку плагина, чтобы не оставлять “подвешенные” события. Стандартный подход — возвращать объект с методом destroy, который удаляет все обработчики и очищает внутренние состояния.

Расширение функциональности

Плагины позволяют реализовать:

  • Сортировку с ограничениями — ограничение на количество элементов в контейнере.
  • События обратной связи — визуальные эффекты, уведомления или анимации при перемещении.
  • Синхронизацию с сервером — отправка изменений на сервер после drop.
  • Интеграцию с фреймворками — автоматическое обновление состояния UI в React, Vue или Angular.

Пример плагина с ограничением количества элементов:

function maxItemsPlugin(drake, maxCount) {
    drake.on('drop', (el, target) => {
        if (target.children.length > maxCount) {
            target.removeChild(el);
        }
    });
    return {
        destroy: () => drake.off('drop')
    };
}

maxItemsPlugin(drake, 3);

Событийная архитектура

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

  • drag + over — изменение стилей перетаскиваемого элемента и контейнера.
  • drop + remove — синхронизация состояния с внешними данными.
  • out + cancel — реализация анимаций отмены перетаскивания.

Организация кода плагинов

Для масштабируемых проектов рекомендуется придерживаться структуры:

plugins/
 ├─ highlightPlugin.js
 ├─ maxItemsPlugin.js
 ├─ syncPlugin.js

Каждый плагин реализуется как самодостаточная функция, принимающая экземпляр drake и опции. Это облегчает подключение и тестирование, а также минимизирует риски конфликтов между плагинами.

Итоги архитектуры Dragula

  • Легковесность — небольшой размер библиотеки.
  • Гибкость — настройки moves, accepts, событийная модель.
  • Расширяемость — поддержка плагинов через событийные хуки.
  • Совместимость — работа с чистым DOM и фреймворками.

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

Оглавление