Обёртки и библиотеки

SortableJS — это современная библиотека JavaScript, предназначенная для реализации перетаскивания элементов списков и сеток с поддержкой drag-and-drop. Она работает на чистом JavaScript и не требует использования фреймворков, хотя легко интегрируется с React, Vue, Angular и другими библиотеками.

Создание перетаскиваемого списка начинается с простого HTML-списка:

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

Подключение SortableJS и инициализация происходит следующим образом:

import Sortable from 'sortablejs';

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

Sortable.create(list, {
    animation: 150,
    ghostClass: 'sortable-ghost',
    chosenClass: 'sortable-chosen',
});
  • animation: задает длительность анимации при перемещении элементов в миллисекундах.
  • ghostClass: CSS-класс для отображения перемещаемого элемента.
  • chosenClass: CSS-класс для выбранного элемента в момент перетаскивания.

Настройка поведения

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

  • handle — позволяет задать конкретный элемент внутри блока, который будет инициировать перетаскивание.
  • filter — исключает определенные элементы из возможности перетаскивания.
  • draggable — задает, какие дочерние элементы контейнера будут перетаскиваться.
  • swapThreshold — определяет чувствительность при обмене элементов местами в списке.

Пример использования handle и filter:

Sortable.create(list, {
    handle: '.drag-handle',
    filter: '.no-drag',
    animation: 200
});

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

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

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

Пример отслеживания перемещения элемента:

Sortable.create(list, {
    onEnd: function(evt) {
        console.log(`Элемент ${evt.item.textContent} перемещен с позиции ${evt.oldIndex} на ${evt.newIndex}`);
    }
});

Поддержка нескольких списков

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

const groupOptions = {
    name: 'shared',
    pull: true,
    put: true
};

Sortable.create(document.getElementById('list1'), { group: groupOptions });
Sortable.create(document.getElementById('list2'), { group: groupOptions });
  • name — имя группы, которая связывает списки.
  • pull — позволяет элементам быть перетаскиваемыми из списка.
  • put — разрешает добавление элементов из других списков.

Визуальные эффекты

Для улучшения визуального восприятия при перетаскивании можно использовать CSS-классы:

.sortable-ghost {
    opacity: 0.4;
}

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

Также поддерживаются динамические стили с использованием опций setData и кастомного рендеринга перетаскиваемого элемента.

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

SortableJS поддерживает:

  • Автоматическую сортировку сеток (swapThreshold, invertSwap).
  • Поддержку сенсорных устройств через Pointer Events.
  • События каскадного обновления, когда перемещение одного элемента влияет на другие.
  • Интеграцию с фреймворками через обёртки для React (react-sortablejs), Vue (vuedraggable), Angular (ngx-sortablejs).

Работа с данными

Для синхронизации состояния DOM с данными JavaScript можно использовать события onUpdate и onAdd:

let data = ['Элемент 1', 'Элемент 2', 'Элемент 3'];

Sortable.create(list, {
    onUpdate: function(evt) {
        const movedItem = data.splice(evt.oldIndex, 1)[0];
        data.splice(evt.newIndex, 0, movedItem);
        console.log(data);
    }
});

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

Итоговая структура использования

  1. HTML-разметка списка — базовый контейнер с элементами.
  2. Инициализация SortableJS с настройками анимации, draggable, handle и filter.
  3. Определение группы для мультисписочной работы.
  4. Подписка на события для обновления данных и кастомизации поведения.
  5. Настройка визуальных эффектов через CSS-классы ghost и chosen.
  6. Интеграция с массивами данных для синхронизации состояния интерфейса с бизнес-логикой.

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

Оглавление