Отличия от Sortable

Shopify Draggable — это современная JavaScript-библиотека, разработанная для реализации интерактивного перетаскивания элементов в веб-приложениях. В отличие от классических решений типа SortableJS, Draggable предлагает более гибкую архитектуру, расширенные возможности событийной модели и модульный подход к добавлению функциональности.

Модульная архитектура

Draggable построен на основе ядра и плагинов. Ядро отвечает за базовое перетаскивание элементов, а расширения подключаются отдельно:

  • SortablePlugin – обеспечивает сортировку внутри контейнера.
  • SwappablePlugin – позволяет обмениваться местами элементами между контейнерами.
  • DroppablePlugin – реализует зоны, куда можно перетаскивать элементы.
  • MirrorPlugin – создает визуальный «отражённый» элемент во время перетаскивания.

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

Работа с событиями

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

  • drag:start – инициируется при начале перетаскивания.
  • drag:move – срабатывает при движении элемента.
  • drag:stop – фиксирует окончание перетаскивания.
  • sortable:sort – срабатывает при изменении позиции элемента внутри контейнера.
  • droppable:over и droppable:out – события входа и выхода элемента из зоны Droppable.
  • mirror:created – создается визуальный клон перетаскиваемого элемента.

SortableJS предоставляет события вроде onStart, onEnd, onUpdate, но их количество и детализация меньше. Draggable позволяет реагировать на каждое изменение состояния и добавлять кастомную логику на каждом этапе.

Визуальное представление перетаскивания

Draggable использует MirrorPlugin, создающий отдельный DOM-элемент, который следует за курсором. Этот подход позволяет:

  • Анимировать перетаскивание без изменения исходного DOM.
  • Легко стилизовать перемещаемый элемент.
  • Избегать конфликтов с layout и перерисовкой страницы.

SortableJS перемещает оригинальные элементы напрямую, что иногда вызывает визуальные «скачки» при сложной верстке и анимации.

Поддержка нескольких контейнеров

Draggable изначально ориентирован на работу с множественными контейнерами через Swappable и Droppable плагины:

import { Draggable, Swappable } from '@shopify/draggable';

const container1 = document.querySelector('#list1');
const container2 = document.querySelector('#list2');

const swappable = new Swappable([container1, container2], {
  draggable: '.item'
});

SortableJS поддерживает мультиконтейнерность через опцию group, но управление обменом элементов между списками менее гибкое и требует дополнительной настройки.

Настройка ограничений и фильтров

Draggable позволяет задавать:

  • зоны, где элемент можно перетаскивать (containers, droppables),
  • элементы, исключённые из перетаскивания (cancel),
  • drag handle, ограничивающий перетаскивание только конкретной частью элемента.
const draggable = new Draggable(document.querySelectorAll('.list'), {
  draggable: '.item',
  handle: '.handle',
  cancel: '.no-drag'
});

SortableJS также имеет handle и filter, но управление исключениями и сложными условиями иногда требует обходных путей.

Поддержка анимации и стилей

Draggable интегрируется с CSS-переходами и анимациями через Mirror и собственные классы:

  • .draggable-mirror – элемент, который визуально следует за курсором.
  • .draggable-source – исходный элемент, к которому применяется временное выделение.
  • .draggable-dragging – класс, активируемый во время перетаскивания.

SortableJS также позволяет использовать CSS-классы, но Mirror-элемента нет, что ограничивает контроль над визуальной анимацией.

Масштабируемость и производительность

Draggable оптимизирован для больших списков и сложных интерфейсов благодаря:

  • Отдельной работе с DOM через MirrorPlugin.
  • Возможности подключать только нужные плагины.
  • Событийной модели без избыточной нагрузки.

SortableJS проще в использовании для небольших списков, но при работе с сотнями элементов и множеством контейнеров может потребоваться дополнительная оптимизация.

Итог ключевых отличий

Особенность Draggable SortableJS
Архитектура Ядро + плагины Монолитная
Событийная модель Подробная, этапы drag/dragging Простая, onStart/onEnd
Визуальный клон MirrorPlugin Нет
Мультиконтейнерность Через Swappable/Droppable Через group
Контроль handle/cancel Гибкий, на уровне плагинов Есть, но ограниченный
Анимация и стили Mirror + CSS классы CSS-классы, без Mirror
Масштабируемость Высокая, оптимизировано Средняя, требует оптимизации

Draggable предоставляет расширенные возможности для сложных интерфейсов с множественными контейнерами, анимациями и детальной реакцией на события. SortableJS остаётся простым и быстрым инструментом для базовой сортировки, но в сложных сценариях Draggable оказывается более гибким и управляемым.

Оглавление