Валидация на сервере

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

Для начала работы необходимо подключить библиотеку:

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

Или установить через npm:

npm install sortablejs

Создание сортируемого списка выполняется через инициализацию нового экземпляра Sortable:

const list = document.getElementById('items');
const sortable = new Sortable(list, {
    animation: 150,
    ghostClass: 'sortable-ghost',
    handle: '.handle'
});
  • animation — плавность перемещения элементов в миллисекундах.
  • ghostClass — CSS-класс для элемента, который перемещается.
  • handle — элемент, за который разрешено захватывать объект для перетаскивания.

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

SortableJS предоставляет набор событий, которые позволяют контролировать процесс сортировки:

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

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

sortable.on('end', function (evt) {
    console.log(`Элемент ${evt.item.textContent} перемещён с позиции ${evt.oldIndex} на ${evt.newIndex}`);
});

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

SortableJS поддерживает работу с несколькими списками через свойство group.

const listA = document.getElementById('listA');
const listB = document.getElementById('listB');

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

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

Элементы можно перетаскивать между списками с одинаковой группой. Для контроля допускаемых операций используется объект group с ключами:

  • name — имя группы.
  • pull — разрешение на перенос элементов в другой список (true, false, "clone").
  • put — разрешение на добавление элементов из других списков.

Кастомизация и стилизация

SortableJS позволяет полностью кастомизировать визуальные эффекты перемещения. Основные свойства:

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

Пример CSS:

.sortable-ghost {
    opacity: 0.4;
}

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

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

Для динамических приложений часто требуется синхронизировать порядок элементов с сервером. После окончания сортировки можно отправлять обновлённый порядок элементов через AJAX:

sortable.on('end', function (evt) {
    const order = Array.from(list.children).map(item => item.dataset.id);
    fetch('/update-order', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({order})
    });
});

Особенности работы с серверной валидацией:

  1. Проверка идентификаторов элементов: сервер должен убедиться, что полученные ID принадлежат текущему пользователю или текущей сессии.
  2. Валидация порядка: нельзя просто записывать полученный массив в базу. Следует проверять допустимые перемещения.
  3. Обработка ошибок: при некорректных данных сервер возвращает статус ошибки и сообщение, фронтенд должен корректно откатить изменения.

Работа с динамическими списками

SortableJS поддерживает динамическое добавление и удаление элементов. Для корректной работы с серверной валидацией рекомендуется обновлять атрибуты data-id каждого элемента и повторно инициализировать сортировку при изменениях DOM:

function refreshSortable() {
    Sortable.create(list, {
        animation: 150,
        onEnd: sendOrderToServer
    });
}

Дополнительные возможности

  • swap — позволяет менять элементы местами без плавного перетаскивания.
  • filter — задаёт элементы, которые нельзя перемещать.
  • multiDrag — возможность выделять несколько элементов и перемещать их одновременно.
  • store — встроенное сохранение порядка элементов в localStorage.

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

Оглавление