Режим fallback

SortableJS — это мощная библиотека для реализации перетаскивания элементов в списках и сетках на веб-странице. Одной из ключевых возможностей является управление поведением при перемещении элементов, включая режим fallback, который обеспечивает стабильность работы на устройствах и браузерах, где нативное перетаскивание может не поддерживаться или работать некорректно.

Основные принципы fallback

Режим fallback в SortableJS используется, когда стандартный механизм HTML5 Drag and Drop либо недоступен, либо не удовлетворяет требованиям проекта. В таких случаях библиотека переключается на использование альтернативных методов обработки событий мыши и касаний для имитации перетаскивания.

Ключевые моменты:

  • Обеспечение совместимости: fallback гарантирует, что элементы можно перетаскивать даже на устройствах с ограниченной поддержкой Drag and Drop, например, на мобильных браузерах старых версий.
  • Контроль над внешним видом: при fallback можно управлять стилями перемещаемого элемента через CSS-классы, обеспечивая плавную анимацию.
  • Событийная модель: все события Drag and Drop, такие как onStart, onEnd, onMove, остаются активными, что позволяет одинаково обрабатывать перемещения независимо от метода.

Настройка fallback

Для включения режима fallback используется опция forceFallback. При установке в true библиотека принудительно отключает нативный Drag and Drop и использует внутреннюю реализацию.

new Sortable(document.getElementById('list'), {
  animation: 150,
  forceFallback: true,
  fallbackClass: 'sortable-fallback',
  fallbackOnBody: true
});

Описание параметров:

  • animation — время анимации в миллисекундах при перемещении элементов.
  • forceFallback — принудительное использование fallback вместо нативного Drag and Drop.
  • fallbackClass — CSS-класс, который применяется к элементу во время перетаскивания. Позволяет стилизовать временный «копируемый» элемент.
  • fallbackOnBody — если true, элемент для перемещения добавляется в <body>, что предотвращает обрезку и проблемы с overflow родительских контейнеров.

Поведение при fallback

При включенном fallback создаётся виртуальный переносимый элемент, который следует за курсором или пальцем пользователя. Оригинальный элемент остаётся на месте до завершения перемещения. Это позволяет корректно обновлять DOM только после завершения операции, минимизируя визуальные «скачки».

Особенности работы:

  1. Создание копии элемента: библиотека клонирует перетаскиваемый элемент, назначает ему position: fixed или absolute и добавляет к нему fallbackClass.
  2. Слежение за курсором/пальцем: перемещение копии синхронизируется с движением указателя, обеспечивая плавный drag.
  3. Обновление порядка элементов: при отпускании элемента библиотека перемещает оригинальный элемент в новую позицию и удаляет временную копию.
  4. События: onStart срабатывает при начале drag, onEnd — при завершении. onMove может использоваться для динамической проверки, разрешено ли перемещение на текущую позицию.

Использование CSS для fallback

Стилизация fallback-элемента играет важную роль для пользовательского опыта. Рекомендуется:

.sortable-fallback {
  opacity: 0.8;
  background-color: #f0f0f0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  cursor: grabbing;
}
  • opacity — прозрачность временного элемента для визуального отличия от оригинала.
  • box-shadow — создание «поднятого» эффекта при перемещении.
  • cursor — изменение курсора для явного указания состояния drag.

Рекомендации по использованию

  • Использовать forceFallback на мобильных устройствах или при обнаружении багов нативного Drag and Drop.
  • Обязательно задавать fallbackClass для контроля визуального вида временного элемента.
  • Для сложных контейнеров с overflow использовать fallbackOnBody, чтобы избежать обрезки draggable-элемента.
  • События onStart, onMove и onEnd позволяют реализовать дополнительную логику, например, динамическое выделение целевого контейнера или проверку условий перемещения.

Примеры продвинутого применения

  1. Drag между списками с fallback:
new Sortable(document.getElementById('list1'), {
  group: 'shared',
  animation: 200,
  forceFallback: true
});

new Sortable(document.getElementById('list2'), {
  group: 'shared',
  animation: 200,
  forceFallback: true
});
  • Использование общей группы shared позволяет перемещать элементы между списками.
  • Fallback обеспечивает стабильность на мобильных устройствах, где нативные события Drag and Drop часто ограничены.
  1. Динамическая проверка возможности перемещения:
onMove: function (evt) {
  return !evt.related.classList.contains('no-drop');
}
  • Позволяет запретить перемещение элемента на определённые позиции, оставаясь совместимым с fallback.

Режим fallback в SortableJS обеспечивает универсальность и надёжность перетаскивания элементов на любых устройствах. Грамотная настройка опций forceFallback, fallbackClass и fallbackOnBody позволяет создать плавный и предсказуемый интерфейс, полностью контролируемый через события библиотеки и CSS.

Оглавление