Адаптивность

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

Создание сортируемого списка начинается с инициализации объекта Sortable на выбранном контейнере DOM:

import Sortable from 'sortablejs';

const list = document.getElementById('sortable-list');

const sortable = new Sortable(list, {
  animation: 150,
  ghostClass: 'sortable-ghost',
  handle: '.drag-handle'
});

Ключевые параметры:

  • animation — скорость анимации перемещения элементов.
  • ghostClass — CSS-класс для визуального эффекта “призрака” при перетаскивании.
  • handle — указание области, за которую можно перетаскивать элемент.

Адаптивное взаимодействие

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

Поддержка сенсорных экранов

SortableJS автоматически поддерживает тач-события, но для оптимизации работы на мобильных устройствах важно учитывать:

  • touchStartThreshold — минимальное расстояние движения пальца для начала перетаскивания. Позволяет избежать случайного срабатывания на небольшие касания.
  • fallbackOnBody — при включении, элемент, который перетаскивается, перемещается в <body>, предотвращая конфликты со стилями контейнера.

Пример конфигурации для мобильных устройств:

const mobileSortable = new Sortable(list, {
  animation: 200,
  touchStartThreshold: 10,
  fallbackOnBody: true
});

Адаптация под различные размеры экранов

Для динамических интерфейсов, где размеры элементов меняются, SortableJS предоставляет события onMove и onEnd, которые можно использовать для корректировки визуальных и функциональных аспектов:

const responsiveSortable = new Sortable(list, {
  onMove: function (evt, originalEvent) {
    // проверка размеров элементов или контейнера
    return evt.related.clientWidth < 200; 
  },
  onEnd: function (evt) {
    adjustLayout(); // функция адаптивного перераспределения элементов
  }
});

Использование этих событий позволяет создавать списки, которые корректно перераспределяются при изменении ширины окна или ориентации устройства.

Перетаскивание между списками

SortableJS поддерживает множественные соединенные списки с сохранением адаптивности:

const connectedSortable = new Sortable(document.getElementById('list1'), {
  group: 'shared',
  animation: 150
});

new Sortable(document.getElementById('list2'), {
  group: 'shared',
  animation: 150
});

Параметр group позволяет элементам свободно перемещаться между списками. Для адаптивного интерфейса важно учитывать:

  • Обновление размеров контейнера после перемещения.
  • Возможность запрета перемещения на маленьких экранах с помощью условий в onMove.

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

Ghost-элементы, placeholder и drag-handle играют ключевую роль в адаптивном UX:

  • ghostClass отображает полупрозрачный элемент при перетаскивании.
  • chosenClass выделяет выбранный элемент.
  • dragClass может изменять стиль элемента в момент активного перемещения.
  • setData и dataTransfer позволяют передавать данные о перетаскиваемом элементе для динамической адаптации интерфейса.

Пример комбинированного стиля для адаптивного интерфейса:

.sortable-ghost {
  opacity: 0.4;
  border: 2px dashed #aaa;
}

.sortable-chosen {
  background-color: #f0f0f0;
}

.drag-handle {
  cursor: grab;
}

Оптимизация производительности

Для больших списков и сеток важны:

  • forceFallback: true — улучшает стабильность на мобильных устройствах.
  • swapThreshold — коэффициент, определяющий чувствительность к изменению позиции элементов.
  • Ленивая инициализация SortableJS только при необходимости для снижения нагрузки на DOM.

События для адаптивной логики

  • onStart — начало перетаскивания.
  • onMove — проверка условий перемещения.
  • onAdd / onRemove — элементы добавлены или удалены из списка.
  • onEnd — завершение операции, используется для перерасчёта сетки или обновления состояния.

Пример обработки события onEnd для адаптивной сетки:

sortable.on('end', function (evt) {
  const items = evt.to.querySelectorAll('.item');
  items.forEach((item, index) => {
    item.style.order = index;
  });
});

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

SortableJS легко интегрируется с Vue, React, Angular, обеспечивая адаптивную сортировку компонентов без прямого манипулирования DOM. Для React и Vue чаще используют обёртки (react-sortablejs, vuedraggable), которые сохраняют реактивность данных и адаптивность интерфейса.

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

Оглавление