Управление жизненным циклом

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

Инициализация и базовая настройка

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

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 предоставляет обширный набор событий для управления жизненным циклом элементов:

  • onStart — срабатывает при начале перетаскивания. Позволяет выполнять действия перед фактическим перемещением элемента, например, добавлять визуальные эффекты.

  • onEnd — вызывается при завершении перетаскивания, когда элемент возвращается в DOM или занимает новое место. Часто используется для сохранения порядка элементов на сервере или обновления внутреннего состояния.

  • onAdd — срабатывает, когда элемент добавлен в новый контейнер. Важное событие для управления несколькими списками, когда объект перемещается между ними.

  • onUpdate — возникает при перестановке элементов внутри одного контейнера. Позволяет изменять данные, синхронизировать с локальным хранилищем или сервером.

  • onRemove — вызывается при удалении элемента из контейнера. Используется для очистки состояния или удаления элементов из данных приложения.

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

Методы управления жизненным циклом

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

  • sortable.destroy() — полностью удаляет сортируемость с контейнера, снимает все слушатели событий и CSS-классы.
  • sortable.option('animation', 200) — динамически изменяет параметры без повторной инициализации.
  • sortable.sort([order]) — переставляет элементы в соответствии с переданным массивом индексов.
  • sortable.toArray() — возвращает текущий порядок элементов в виде массива, пригодного для синхронизации с базой данных.
  • sortable.save() — сохраняет состояние сортировки, если используется встроенная поддержка сохранения.

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

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

const containers = document.querySelectorAll('.sortable-list');

containers.forEach(container => {
    new Sortable(container, {
        group: 'shared',
        animation: 150,
        onAdd(event) {
            console.log('Элемент перемещён в другой список', event.item);
        }
    });
});

Особенности группировки:

  • group.name — идентификатор группы для связи нескольких контейнеров.
  • group.pull — определяет, можно ли вытаскивать элемент из контейнера (true/false или функция).
  • group.put — управляет, можно ли помещать элементы в контейнер.

Управление состоянием элементов

SortableJS позволяет добавлять и удалять элементы динамически, не нарушая работу drag-and-drop:

// Добавление элемента
const newItem = document.createElement('li');
newItem.textContent = 'Новый элемент';
sortable.el.appendChild(newItem);
sortable.sort(sortable.toArray()); // Обновление индексов

// Удаление элемента
const itemToRemove = sortable.el.querySelector('li:first-child');
sortable.el.removeChild(itemToRemove);
sortable.save(); // Синхронизация состояния

Эти действия учитываются библиотекой и корректно интегрируются с событиями жизненного цикла.

Интеграция с данными

Для приложений с динамическими данными важно поддерживать синхронизацию DOM и состояния приложения. Использование toArray() и событий onEnd или onUpdate позволяет:

  • Автоматически обновлять массивы данных, соответствующие текущему порядку элементов.
  • Сохранять изменения на сервере через AJAX или WebSocket.
  • Управлять уникальными идентификаторами элементов и группировать их по логике приложения.

Настройка визуальных эффектов

Важная часть управления жизненным циклом — визуальная обратная связь. SortableJS поддерживает:

  • ghostClass — класс для перетаскиваемого элемента.
  • chosenClass — класс для элемента при выборе перед перемещением.
  • dragClass — класс для элемента в процессе перемещения.
  • Параметр animation для плавного смещения соседних элементов.

Эти возможности позволяют интегрировать библиотеку в любой интерфейс без нарушения UX.

Хотя SortableJS выглядит как простая библиотека для drag-and-drop, её сила заключается именно в тонком управлении жизненным циклом элементов, обеспечении предсказуемости поведения, синхронизации с данными и возможности масштабирования на несколько контейнеров с динамическим добавлением и удалением элементов.

Оглавление