Swap

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

Принцип работы Swap

В стандартном режиме SortableJS элемент перемещается и вставляется между другими элементами, создавая визуальный зазор. Режим swap меняет логику:

  • Перетаскиваемый элемент не вставляется между элементов, а обменивается местами с элементом, над которым он находится.
  • Это особенно удобно для интерфейсов, где требуется строгое сохранение числа элементов или фиксированная сетка, например, карточки в таблице или элементы в списке без промежутков.

Swap-режим активируется через опцию swap и настраивается с помощью дополнительных параметров.

new Sortable(listElement, {
    swap: true,             // включение swap-режима
    swapClass: "highlight", // класс для визуального выделения цели обмена
    animation: 150          // плавная анимация при обмене
});

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

  • swap – логическое значение, включающее обмен.
  • swapClass – CSS-класс, который добавляется к элементу, с которым произойдет обмен, чтобы визуально показать цель.
  • swapThreshold – число от 0 до 1, определяющее, насколько элемент должен перекрывать другой для триггера обмена. По умолчанию 1, что означает полный контакт.

Swap Threshold

Параметр swapThreshold позволяет тонко настроить чувствительность обмена.

  • Значение 0.5 означает, что перетаскиваемый элемент должен перекрывать не менее половины цели, чтобы произошёл swap.
  • Это предотвращает случайные обмены при минимальном пересечении элементов.
new Sortable(listElement, {
    swap: true,
    swapClass: "highlight",
    swapThreshold: 0.6
});

В этом примере элемент должен перекрывать 60% другого элемента для срабатывания swap.

События при Swap

SortableJS поддерживает ряд событий, которые полезны для обработки логики обмена:

  • onSwap – вызывается в момент обмена. Можно использовать для обновления данных или синхронизации состояния.
  • onSwapComplete – вызывается после завершения анимации обмена.
new Sortable(listElement, {
    swap: true,
    swapClass: "highlight",
    animation: 200,
    onSwap: function(evt) {
        console.log("Элементы будут обменяны:", evt.dragged, evt.swapTarget);
    },
    onSwapComplete: function(evt) {
        console.log("Обмен завершен:", evt.dragged, evt.swapTarget);
    }
});

Параметры события:

  • evt.dragged – перетаскиваемый элемент.
  • evt.swapTarget – элемент, с которым произойдет обмен.

Визуальное оформление

Для swap-режима важна наглядная индикация, иначе пользователь может не понять, с каким элементом произойдет обмен. Рекомендуется использовать CSS-класс swapClass для подсветки:

.highlight {
    border: 2px dashed #007bff;
    background-color: #e0f0ff;
}

Эффект можно комбинировать с анимацией animation для плавного перемещения элементов при swap.

Совмещение с другими опциями

Swap хорошо работает с большинством стандартных опций SortableJS:

  • animation – плавная визуализация перемещения.
  • ghostClass – класс для перетаскиваемого элемента.
  • handle – ограничение начала перетаскивания конкретной областью элемента.
new Sortable(listElement, {
    swap: true,
    swapClass: "highlight",
    animation: 150,
    ghostClass: "dragging",
    handle: ".drag-handle"
});

В этом примере элементы меняются местами только при перетаскивании за .drag-handle, а перетаскиваемый элемент получает прозрачный фон через ghostClass.

Применение в практических интерфейсах

Swap-режим полезен для:

  • Карточек Kanban: перемещение карточек между ячейками с сохранением структуры.
  • Списков рейтинга: обмен позиций элементов без нарушения общего числа позиций.
  • Игровых интерфейсов: перемещение объектов на сетке без промежуточных пустых ячеек.

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

Тонкости производительности

При большом числе элементов следует учитывать:

  • Swap-режим добавляет обработку пересечений элементов, что может немного замедлять интерфейс при тысячах элементов.
  • Анимацию стоит ограничивать разумными значениями (100–200 мс), чтобы не нагружать рендеринг браузера.
  • Для динамически создаваемых списков необходимо корректно инициализировать SortableJS после добавления новых элементов.

Итоговые рекомендации по настройке Swap

  1. Всегда задавать swapClass для наглядного визуального эффекта.
  2. Настраивать swapThreshold для предотвращения случайных обменов.
  3. Использовать события onSwap и onSwapComplete для синхронизации данных.
  4. Совмещать с animation и ghostClass для улучшения UX.
  5. Проверять производительность на больших списках и при необходимости оптимизировать DOM или отключать анимацию.

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

Оглавление