Обмен элементов местами

SortableJS — это мощная библиотека для реализации перетаскивания и сортировки элементов на веб-странице. Основной способ использования заключается в подключении скрипта и инициализации Sortable на контейнере с элементами.

<ul id="sortable-list">
    <li data-id="1">Элемент 1</li>
    <li data-id="2">Элемент 2</li>
    <li data-id="3">Элемент 3</li>
</ul>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
  new Sortable(document.getElementById('sortable-list'), {
      animation: 150, 
      ghostClass: 'sortable-ghost',
      chosenClass: 'sortable-chosen'
  });
</script>

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

  • animation — плавность перемещения элементов (в миллисекундах).
  • ghostClass — CSS-класс для элемента-призрака во время перетаскивания.
  • chosenClass — класс для элемента, который был выбран для перемещения.

Работа с событиями

SortableJS предоставляет широкие возможности для отслеживания действий пользователя через события. Основные события:

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

Пример использования события onEnd:

new Sortable(document.getElementById('sortable-list'), {
    animation: 150,
    onEnd: function (evt) {
        console.log(`Элемент с индексом ${evt.oldIndex} перемещён на позицию ${evt.newIndex}`);
    }
});

Важно: evt.oldIndex и evt.newIndex позволяют точно определить, какой элемент и на какое место был перемещён.

Настройка ограничений и фильтров

SortableJS позволяет управлять тем, какие элементы можно перемещать, а какие нет.

  • filter — CSS-селектор, указывающий элементы, которые нельзя перетаскивать.
  • draggable — определяет, какие элементы внутри контейнера могут быть перемещены.

Пример фильтрации:

new Sortable(document.getElementById('sortable-list'), {
    draggable: 'li',
    filter: '.disabled',
    onMove: function (evt) {
        return !evt.related.classList.contains('disabled');
    }
});

В этом примере элементы с классом disabled остаются неподвижными.

Работа с несколькими списками

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

<ul id="list1">
    <li>Элемент A</li>
    <li>Элемент B</li>
</ul>

<ul id="list2">
    <li>Элемент C</li>
    <li>Элемент D</li>
</ul>

<script>
  new Sortable(list1, { group: 'shared', animation: 150 });
  new Sortable(list2, { group: 'shared', animation: 150 });
</script>

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

  • group — имя группы для совместного перемещения элементов между списками.
  • Элементы могут быть настроены как pull: true/false и put: true/false, чтобы ограничивать возможность переноса между контейнерами.

Сохранение порядка элементов

Для хранения пользовательской сортировки можно использовать события onEnd или onUpdate и обновлять состояние на сервере или в локальном хранилище.

new Sortable(document.getElementById('sortable-list'), {
    animation: 150,
    onUpdate: function (evt) {
        const order = Array.from(evt.from.children).map(li => li.dataset.id);
        localStorage.setItem('sortableOrder', JSON.stringify(order));
    }
});

Пояснение: сохраняется массив идентификаторов элементов в текущем порядке, что позволяет восстановить их после перезагрузки страницы.

Настройка визуального представления

SortableJS позволяет кастомизировать внешний вид элементов во время перетаскивания:

  • ghostClass — задаёт стиль для элемента-призрака.
  • chosenClass — выделение выбранного элемента.
  • dragClass — класс для элемента в момент активного перемещения.

Пример CSS:

.sortable-ghost {
    opacity: 0.5;
    background-color: #f0f0f0;
}

.sortable-chosen {
    border: 2px solid #007bff;
}

Эти стили делают перемещение более наглядным и интуитивным для пользователя.

Расширенные возможности

SortableJS предоставляет ряд дополнительных опций:

  • swapThreshold — порог замены элементов при перемещении.
  • invertSwap — изменение направления при swap-перетаскивании.
  • scroll — автоматическая прокрутка контейнера при перетаскивании за пределы видимой области.
new Sortable(document.getElementById('sortable-list'), {
    animation: 150,
    swapThreshold: 0.65,
    scroll: true
});

Практическое значение: такие параметры обеспечивают гибкое управление взаимодействием с элементами в больших списках или на мобильных устройствах.

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

SortableJS легко интегрируется с современными фронтенд-фреймворками:

  • React — через react-sortablejs.
  • Vue — через vuedraggable.
  • Angular — через обёртки для директив и сервисов.

Интеграция позволяет использовать двустороннее связывание данных и упрощает работу с динамическими массивами.

Резюме по обмену элементов местами

  • Инициализация Sortable на контейнере с элементами.
  • Обработка событий для отслеживания и сохранения порядка.
  • Ограничения и фильтры для выбора перетаскиваемых элементов.
  • Работа с несколькими списками для переноса между контейнерами.
  • Визуальное оформление через классы ghostClass, chosenClass, dragClass.
  • Расширенные настройки для swap, прокрутки и анимации.
  • Интеграция с фреймворками для динамических и реактивных приложений.

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

Оглавление