Состояния элементов

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

Инициализация и базовое состояние

При создании сортируемого списка с помощью Sortable каждый элемент получает базовое состояние, в котором он доступен для перетаскивания. Инициализация выполняется следующим образом:

const sortable = new Sortable(document.getElementById('list'), {
    animation: 150,
    ghostClass: 'sortable-ghost',
    chosenClass: 'sortable-chosen'
});

Ключевые параметры состояния:

  • animation — задаёт скорость анимации при перемещении элементов. Позволяет визуально обозначить изменение положения.
  • ghostClass — класс, который применяется к элементу во время его перетаскивания, создавая эффект «призрака».
  • chosenClass — класс для элемента, который был выбран для перетаскивания.

В момент инициализации все элементы получают готовность к взаимодействию. Фактически, базовое состояние — это состояние «готовности к перетаскиванию», без которого элементы не будут реагировать на события мыши или касаний.

Состояние выбора элемента (chosen)

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

  • Элемент получает класс chosenClass.
  • Срабатывает событие onChoose, через которое можно выполнять дополнительные действия:
sortable.option("onChoose", function(evt) {
    console.log('Элемент выбран для перетаскивания', evt.item);
});
  • В состоянии chosen элемент ещё не перемещается, но готов к началу перетаскивания.

Состояние перемещения (dragging)

После начала перетаскивания элемент переходит в состояние dragging:

  • На элемент и/или его копию (ghost) накладывается ghostClass.
  • В это время библиотека отслеживает координаты курсора и позицию элемента относительно других.
  • Возможна активация событий:
sortable.option("onStart", function(evt) {
    console.log('Начало перетаскивания', evt.item);
});
sortable.option("onMove", function(evt) {
    return true; // Возвращение true позволяет перемещать элемент
});

Особенности состояния dragging:

  • Можно динамически изменять разрешения на перемещение (filter, draggable).
  • Поддерживаются ограничения по оси (direction: "vertical" или "horizontal"), которые влияют на поведение состояния перемещения.
  • Состояние активно до момента отпускания элемента пользователем.

Состояние вставки (over / insert)

Во время перетаскивания элементы могут находиться в зоне потенциальной вставки. Это состояние управляется классами и событиями:

  • onChange — срабатывает при изменении порядка элементов.
  • onAdd — срабатывает, когда элемент перемещён в другой список.
  • onUpdate — срабатывает при изменении позиции внутри одного списка.
sortable.option("onUpdate", function(evt) {
    console.log('Элемент перемещён внутри списка', evt.oldIndex, '→', evt.newIndex);
});

Ключевые моменты состояния вставки:

  • Визуально элемент может подсвечиваться через CSS.
  • Состояние является промежуточным: элемент ещё не окончательно закреплён.
  • Позволяет реализовать динамическое изменение порядка с плавной анимацией.

Состояние завершения (end / unchoose)

После отпускания элемента он покидает состояние dragging и возвращается в нормальное состояние:

  • Срабатывает событие onEnd, фиксирующее финальное положение.
  • Убираются классы chosenClass и ghostClass.
  • Можно получить индексы старой и новой позиции, что полезно для синхронизации с данными:
sortable.option("onEnd", function(evt) {
    console.log('Перетаскивание завершено', evt.item, evt.oldIndex, evt.newIndex);
});
  • Если элемент был перемещён между списками, активируется onAdd и onRemove в соответствующих контейнерах.

Управление состояниями через методы API

SortableJS предоставляет методы для явного управления состояниями элементов:

  • sortable.sort([...]) — переставляет элементы в соответствии с массивом индексов.
  • sortable.option("disabled", true) — временно блокирует перетаскивание всех элементов.
  • sortable.destroy() — удаляет сортируемость, переводя все элементы в исходное состояние.

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

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

Правильное управление состояниями важно не только для визуального восприятия:

  • Минимизируется количество перерисовок DOM.
  • Улучшается отзывчивость интерфейса при большом количестве элементов.
  • Позволяет реализовать «умные» ограничения: запрет перемещения определённых элементов, динамическая сортировка, работа с вложенными списками.

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

Заключение по структуре состояний

Состояния элементов в SortableJS образуют четкую последовательность:

  1. Базовое состояние — готовность к перетаскиванию.
  2. Chosen — элемент выбран.
  3. Dragging — элемент перемещается.
  4. Over / Insert — элемент находится над потенциальной позицией вставки.
  5. End / Unchoose — завершение перетаскивания, возврат в нормальное состояние.

Эта структура обеспечивает предсказуемое и управляемое взаимодействие с элементами, что является основой для построения сложных интерфейсов с drag-and-drop.

Оглавление