Deprecated функциональность

Shopify Draggable — это современная библиотека для реализации перетаскивания элементов в интерфейсе, основанная на чистом JavaScript. Несмотря на активное развитие, некоторые функции и подходы в библиотеке признаны устаревшими (deprecated) и больше не рекомендуются к использованию. Их использование может привести к проблемам совместимости с будущими версиями и к снижению производительности.

Отказ от поддержки Sortable

В ранних версиях Draggable существовал встроенный модуль Sortable, предназначенный для упорядочивания списков элементов через drag-and-drop. Он позволял автоматически переставлять элементы DOM при перетаскивании. С версии 1.0.0 использование Sortable было признано устаревшим по следующим причинам:

  • Ограниченная гибкость при работе с сложными структурами DOM.
  • Конфликты с другими плагинами Draggable, особенно с Plugins вроде Swappable и Collidable.
  • Невозможность полного контроля событий перед и после перемещения.

Рекомендуется использовать комбинацию Draggable + Plugins (Swappable, SortablePlugin из внешних библиотек) для реализации динамического упорядочивания элементов, вместо устаревшего встроенного Sortable.

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

const container = document.querySelector('.list');
const draggable = new Draggable(container, {
  draggable: '.item'
});

// Вместо Sortable лучше использовать Swappable
import { Swappable } from '@shopify/draggable';

const swappable = new Swappable(container, {
  draggable: '.item'
});

Mirror и устаревшие методы управления

Компонент Mirror, создающий визуальную копию перетаскиваемого элемента, подвергался значительным изменениям. В старых версиях Draggable использовались методы:

  • mirror.create()
  • mirror.update()
  • mirror.destroy()

Эти методы теперь считаются устаревшими. Прямое управление Mirror вручную не рекомендуется, так как библиотека автоматически обрабатывает создание и удаление зеркала через события drag:start, drag:move и drag:stop.

// Не рекомендуется:
draggable.mirror.create(element);

// Рекомендуется использовать события:
draggable.on('drag:start', (evt) => {
  console.log('Перетаскивание началось', evt);
});

События drag:over и drag:out устаревшего поведения

Ранее события drag:over и drag:out активно использовались для обработки пересечения элементов. В текущих версиях их поддержка ограничена и они заменены более универсальными событиями:

  • collidable:over
  • collidable:out

Эти события предоставляют расширенные возможности, такие как определение точной позиции пересечения и доступ к API Collidable плагина.

import { Collidable } from '@shopify/draggable';

const collidable = new Collidable(container, {
  draggable: '.item',
  droppable: '.dropzone'
});

collidable.on('collidable:over', (evt) => {
  console.log('Элемент над зоной', evt.over);
});

Устаревшие конфигурационные опции

Некоторые опции Draggable признаны deprecated:

  • delay — задержка начала drag в старой реализации. Сейчас рекомендуется использовать событие drag:start и кастомную логику таймера.
  • distance — минимальное расстояние перемещения до старта drag. Поддержка ограничена и может быть удалена в будущих версиях.
// Старый способ
const draggable = new Draggable(container, {
  draggable: '.item',
  delay: 100,
  distance: 5
});

// Новый способ через событие drag:start
draggable.on('drag:start', (evt) => {
  setTimeout(() => {
    console.log('Начало перетаскивания после задержки');
  }, 100);
});

Deprecated плагины и модули

Некоторые встроенные плагины больше не поддерживаются:

  • Sortable — заменён внешними решениями и Swappable.
  • Plugins.Droppable (ранняя версия) — заменён Collidable.
  • Plugins.AutoScroll (старая реализация) — рекомендуется использовать кастомный скролл или новый AutoScroll плагин.

Рекомендации по переходу от устаревших функций

  1. Проверять документацию при обновлении Draggable, обращая внимание на пометки deprecated.
  2. Использовать новые плагины (Swappable, Collidable) вместо устаревших встроенных решений.
  3. Отказаться от ручного управления Mirror, использовать события drag для кастомной логики.
  4. Переписать обработку событий drag:over и drag:out через Collidable.
  5. Пересмотреть конфигурационные опции, заменяя устаревшие delay и distance на современные механизмы событий.

Эти шаги обеспечивают совместимость с актуальной версией Draggable и сохраняют производительность интерфейсов с drag-and-drop.

Оглавление