Требования и зависимости

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

Минимальные системные требования

  1. Браузеры Dragula поддерживает современные браузеры с реализацией стандартов HTML5, CSS3 и DOM Level 2 Events. Основное требование — наличие нативного API для обработки событий мыши (mousedown, mousemove, mouseup) и сенсорных событий (touchstart, touchmove, touchend) для мобильных устройств. Поддержка включает:

    • Google Chrome последних версий
    • Mozilla Firefox последних версий
    • Microsoft Edge
    • Safari (desktop и iOS)
    • Мобильные браузеры на базе WebKit и Blink

  2. Среда выполнения JavaScript Dragula написана на чистом JavaScript без использования фреймворков. Минимальные требования:

    • ES5-совместимый интерпретатор JavaScript
    • Поддержка Array.prototype.forEach, Array.prototype.filter, Object.keys и других стандартных методов ES5

    Для проектов с поддержкой старых браузеров (например, Internet Explorer 9+) может потребоваться полифил classList и других стандартов DOM.

Зависимости

Dragula стремится быть автономной библиотекой, поэтому внешние зависимости сведены к минимуму. Основная зависимость — это наличие библиотеки contra в более старых версиях Dragula, которая используется для управления событиями. В актуальных релизах Dragula встроена внутренняя реализация событий, и установка дополнительных пакетов не требуется.

CSS зависимости: Для корректного отображения перетаскиваемых элементов Dragula использует собственные стили. Основные классы:

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

Для правильной работы перетаскивания рекомендуется подключить файл dragula.css, который идет вместе с библиотекой. Без него визуальное отображение перетаскивания будет работать, но элементы могут вести себя некорректно с точки зрения UX.

Интеграция с фреймворками

Dragula может использоваться как с нативным JavaScript, так и с популярными фреймворками:

  1. React Dragula совместим с React, но для контроля состояния перетаскивания рекомендуется оборачивать контейнеры и использовать callback-функции Dragula (drag, drop, over, out) для синхронизации с состоянием компонентов.

  2. Angular Для Angular-директив Dragula можно подключать через официальные пакеты, например ng2-dragula. Основная зависимость — сам Dragula, а директива обеспечивает биндинг с Angular-событиями.

  3. Vue.js С Vue используется библиотека vue-dragula, которая является оберткой над Dragula. Она управляет реактивными списками и позволяет работать с массивами напрямую.

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

Dragula может быть установлена несколькими способами:

  • Через npm:

    npm install dragula

    В проекте ES6 модулей:

    import dragula from 'dragula';
import 'dragula/dist/dragula.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>

  • Локальная установка Можно скачать исходные файлы с официального репозитория и подключить их в проекте:

    <link rel="stylesheet" href="dragula.css">
<script src="dragula.js"></script>

Версионные зависимости

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

Дополнительные требования

  • Стилизация контейнеров: контейнеры, из которых перемещаются элементы, должны иметь корректное CSS-оформление, включая position (обычно relative или absolute), чтобы .gu-mirror правильно отображался поверх других элементов.
  • Контроль размеров элементов: если элементы имеют динамическую высоту или ширину, рекомендуется устанавливать фиксированные размеры или минимальные значения для предотвращения сдвигов при перетаскивании.
  • Совместимость с другими библиотеками: Dragula может работать параллельно с библиотеками, изменяющими DOM, но важно избегать конфликтов с другими drag-and-drop решениями, которые управляют теми же контейнерами.
Оглавление