Библиотека Shopify Draggable развивается как мощный
инструмент для реализации перетаскивания элементов на веб-странице с
поддержкой современных браузеров и простым API. Рассмотрим ключевые
изменения и нововведения, которые оказали существенное влияние на
функциональность и производительность библиотеки.
Версия 1.0.0 — Первоначальный
релиз
- Основной функционал: поддержка базового
drag-and-drop для списков и сеток.
- Поддержка событий:
drag:start,
drag:move, drag:stop.
- Сортировка элементов: возможность сортировки
элементов внутри контейнера.
- Простая интеграция: возможность инициализации
Draggable на любом DOM-элементе с помощью CSS-селектора.
- Базовая кастомизация: стилизация перетаскиваемого
элемента через
classes и опцию mirror.
Версия 1.1.0 —
Расширение событийной модели
- Добавлены новые события:
sortable:sort,
sortable:stop, sortable:swappable.
- Поддержка зеркалирования (Mirror): улучшенное
создание зеркальной копии элемента для визуализации во время
перетаскивания.
- Улучшена производительность при работе с большими списками (более
200 элементов).
Версия 1.2.0 — Swappable и
Plugins
- Swappable Plugin: введен новый плагин для замены
элементов при перетаскивании между контейнерами.
- Plugin Architecture: добавлена возможность
подключения сторонних плагинов через
Draggable.Plugins.
- События плагинов: новые события, специфичные для
Swappable:
swappable:swap,
swappable:stop.
- Конфигурация плагинов: гибкая настройка поведения,
включая ограничение взаимодействия по CSS-классам и фильтрам.
- Snap Plugin: автоматическое выравнивание элементов
при отпускании в контейнере, улучшение UX для сеток и карточек.
- AutoScroll Plugin: добавлена поддержка прокрутки
контейнера при перемещении элемента к краю.
- Производительность: оптимизация работы с
динамическими контейнерами и виртуальными списками.
- API для динамического обновления: методы
addContainer, removeContainer,
updateOptions.
Версия
1.4.0 — Улучшение Drag & Drop для мобильных устройств
- Поддержка сенсорных событий: улучшена работа на iOS
и Android.
- Тонкая настройка чувствительности: введены
параметры
delay и distance для предотвращения
случайных перетаскиваний.
- События для мобильных платформ:
drag:touchstart, drag:touchend.
- Совместимость с библиотеками жестов: интеграция с
Hammer.js и другими сторонними инструментами жестов.
Версия 1.5.0 —
Производительность и стабилизация
- Оптимизация DOM-операций: минимизация перерисовок
при сортировке большого количества элементов.
- Улучшенные события Mirror:
mirror:created, mirror:attached,
mirror:destroyed.
- Исправления багов: устранение проблем с повторным
созданием контейнеров и некорректным позиционированием элементов при
быстром drag-and-drop.
- Расширение поддержки CSS Grid: стабильная работа в
сеточных макетах.
Версия 1.6.0 — Новые
возможности API
- Методы для контроля drag:
draggable.start(), draggable.stop(),
draggable.cancel().
- События для динамического управления:
drag:clone, drag:over,
drag:out.
- Поддержка множественного выбора элементов:
возможность перетаскивать несколько элементов одновременно.
- Гибкая настройка зеркала: кастомные шаблоны для
визуализации элементов во время перетаскивания.
Версия
1.7.0 — Интеграция с современными фреймворками
- Поддержка React и Vue: улучшенные хуки для
интеграции Draggable в компоненты.
- Поддержка виртуальных списков: совместимость с
библиотеками react-virtualized и Vue Virtual Scroller.
- События для сложных сценариев:
drag:beforeStart, drag:afterStop, позволяющие
реализовать транзакционную логику при перетаскивании.
- Обновление документации и примеров: добавлены
готовые шаблоны для сеток, таблиц и Kanban-досок.
Версия
1.8.0 — Расширенные возможности Swappable и Sortable
- Поддержка нескольких контейнеров: возможность
одновременной сортировки и обмена элементов между разными зонами.
- Обновленный Swappable Plugin: настройка логики swap
через
swapAnimation, swapThreshold.
- События drag и swap: возможность предотвращения
действия через
event.preventDefault().
- Интеграция с Drag Layers: создание независимых
слоев для сложных интерфейсов drag-and-drop.
Выводы по Changelog
Эволюция Shopify Draggable показывает постепенный переход от базового
drag-and-drop к полностью настраиваемой системе с поддержкой:
- мульти-контейнеров и Swappable Plugin,
- зеркалирования и кастомных шаблонов элементов,
- мобильных устройств и сенсорных экранов,
- интеграции с современными фреймворками и виртуальными списками,
- сложных событий и контролируемого drag.
Эта история версий демонстрирует, как библиотека развивается не
только функционально, но и с точки зрения производительности и
расширяемости API.