REST API интеграция

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

Библиотека поддерживает работу с чистым JavaScript, не требует jQuery или других крупных фреймворков, и её API спроектировано для максимальной гибкости.

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

Для создания сортируемого списка необходимо подключить библиотеку и инициализировать её на DOM-элементе:

import Sortable from 'sortablejs';

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

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

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

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

Эти параметры позволяют настроить визуальные эффекты и улучшить UX.

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

SortableJS предоставляет богатый набор событий, которые позволяют интегрировать библиотеку с другими системами, включая REST API. Основные события:

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

Пример отслеживания изменений и отправки данных на сервер:

sortable.option('onEnd', function (evt) {
    const order = Array.from(list.children).map(item => item.dataset.id);
    
    fetch('/api/update-order', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ order })
    }).then(response => response.json())
      .then(data => console.log('Порядок обновлён:', data))
      .catch(error => console.error('Ошибка при обновлении:', error));
});

Здесь используется REST API для синхронизации нового порядка элементов с сервером. Важно сохранять идентификаторы элементов, чтобы сервер мог корректно обновить состояние базы данных.

Группы и мультисписки

SortableJS поддерживает объединение нескольких списков в группы, что позволяет перетаскивать элементы между списками:

const listA = document.getElementById('list-a');
const listB = document.getElementById('list-b');

Sortable.create(listA, {
    group: 'shared',
    animation: 150
});

Sortable.create(listB, {
    group: 'shared',
    animation: 150
});

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

  • Все списки с одинаковым group могут обмениваться элементами.
  • Для контроля добавления и удаления можно использовать onAdd и onRemove.
  • Можно ограничивать перетаскивание через pull и put внутри группы:
group: {
    name: 'shared',
    pull: 'clone',
    put: false
}
  • pull: 'clone' позволяет копировать элементы при перетаскивании.
  • put: false запрещает добавление элементов из других списков.

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

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

  • filter — исключает элементы из сортировки по CSS-селектору.
  • disabled — временно блокирует сортировку списка.
  • handle — задаёт конкретный элемент, за который можно захватывать объект для перетаскивания:
Sortable.create(list, {
    handle: '.drag-handle',
    filter: '.no-drag',
    animation: 200
});

Использование фильтров и handle особенно важно для сложных интерфейсов, где часть элементов должна оставаться статичной.

Синхронизация с сервером через REST API

Для интеграции с серверной частью рекомендуется:

  1. Добавлять уникальные идентификаторы элементам через data-id.
  2. Отслеживать событие onEnd или onUpdate.
  3. Формировать массив идентификаторов в порядке отображения.
  4. Отправлять массив на сервер через POST-запрос с Content-Type: application/json.
  5. Обрабатывать ответ сервера для обновления интерфейса при необходимости.

Пример POST-запроса:

const order = Array.from(list.children).map(item => item.dataset.id);

fetch('/api/sortable/update', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ order })
})
.then(response => response.json())
.then(result => console.log('Сервер подтвердил порядок:', result))
.catch(err => console.error('Ошибка API:', err));

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

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

SortableJS поддерживает дополнительные функции:

  • Многомерные структуры — вложенные списки с независимыми настройками.
  • Плагины — например, AutoScroll для автоматической прокрутки страницы при перемещении.
  • Динамическое добавление/удаление элементов — список можно модифицировать без пересоздания Sortable-инстанса.
  • События dragover и dragstart — позволяют реализовать сложные пользовательские сценарии и визуальные эффекты.

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

Визуальные улучшения

CSS играет ключевую роль в визуальном восприятии перетаскивания. Основные классы, используемые SortableJS:

  • .sortable-ghost — полупрозрачное отображение перемещаемого элемента.
  • .sortable-chosen — элемент, выбранный для перемещения.
  • .sortable-drag — динамический класс во время перетаскивания.

Пример стилей:

.sortable-ghost {
    opacity: 0.4;
    border: 2px dashed #999;
}

.sortable-chosen {
    background-color: #f0f0f0;
    border: 1px solid #333;
}

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

Производительность и оптимизация

  • Ограничение числа DOM-операций: использование documentFragment при массовом обновлении.
  • Анимация только изменяемых элементов через animation для плавного эффекта.
  • Отложенная синхронизация с сервером при больших списках (например, через debounce или throttling).
  • Минимизация объема данных при отправке на сервер, передавая только идентификаторы элементов, а не весь HTML.

Эти подходы позволяют использовать SortableJS даже в крупных интерфейсах без потери производительности.

Оглавление