Валидация на клиенте

SortableJS — это мощная библиотека на JavaScript, позволяющая реализовывать перетаскивание элементов списка и их сортировку с минимальными усилиями. Библиотека поддерживает как простые списки <ul>/<ol>, так и сложные структуры с вложенными элементами. Основной объект библиотеки создается через конструктор Sortable, которому передается контейнер и набор опций.

import Sortable from 'sortablejs';

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

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

Инициализация и базовое использование

Создание перетаскиваемого списка начинается с выбора контейнера. Элементы внутри контейнера автоматически становятся сортируемыми. Важно понимать различие между контейнером и элементами списка: контейнер отвечает за порядок элементов, а элементы — за содержимое.

<ul id="task-list">
    <li class="task-item">Задача 1</li>
    <li class="task-item">Задача 2</li>
    <li class="task-item">Задача 3</li>
</ul>

Подключение SortableJS позволяет менять порядок <li> перетаскиванием, а дополнительные параметры дают возможность управлять поведением: ограничивать перетаскивание, задавать визуальные эффекты, связывать несколько списков.

События и обратные вызовы

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

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

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

sortable.option("onEnd", function(evt) {
    const movedItem = evt.item;
    console.log("Элемент перемещен:", movedItem.textContent);
});

Ограничения и условия сортировки

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

  • filter — позволяет исключить элементы из сортировки. Пример: кнопки удаления внутри элементов списка.
new Sortable(list, {
    filter: '.non-draggable',
    onFilter: function(evt) {
        console.log('Элемент не может быть перемещен:', evt.item);
    }
});
  • disabled — блокировка всей сортировки для конкретного списка.
  • handle — ограничение зоны захвата элемента, предотвращающее случайное перетаскивание.
  • group — объединение списков в одну группу для обмена элементами, с возможностью настройки правил добавления и удаления.

Интеграция с клиентской валидацией

SortableJS сам по себе не выполняет валидацию данных, однако события и фильтры позволяют встроить проверки непосредственно в процесс сортировки. Например, можно проверять:

  • допустимую позицию элемента (например, нельзя переместить задачу выше определенного индекса),
  • соответствие содержимого элементу (например, проверка типа данных или обязательных полей),
  • ограничения на количество элементов в списке.
sortable.option("onEnd", function(evt) {
    const index = evt.newIndex;
    const item = evt.item;

    if (index === 0 && !item.classList.contains('priority')) {
        alert("Только элементы с приоритетом могут быть перемещены на первую позицию");
        sortable.sort([...evt.from.children].map(el => el)); // возвращение к исходному порядку
    }
});

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

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

SortableJS поддерживает создание понятного и приятного интерфейса:

  • ghostClass — создает эффект «призрака» перетаскиваемого элемента.
  • chosenClass — выделяет выбранный элемент для перемещения.
  • animation — плавная анимация при перестановке элементов.
  • fallbackOnBody — управление поведением при перетаскивании элементов с абсолютным позиционированием.

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

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

Использование группы (group) позволяет объединять несколько списков, поддерживая возможность перемещения элементов между ними. Опции группы включают:

  • pull — разрешает или запрещает вытаскивание элементов из списка.
  • put — разрешает или запрещает добавление элементов в список.
  • revertOnSpill — возвращает элемент на исходное место, если он отпущен вне списка.
new Sortable(listA, {
    group: { name: 'shared', pull: 'clone', put: false },
});
new Sortable(listB, {
    group: 'shared',
});

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

Методы управления динамически

SortableJS предоставляет методы для управления списком без прямого вмешательства в DOM:

  • sort() — программное изменение порядка элементов.
  • toArray() — получение массива идентификаторов элементов для синхронизации с сервером.
  • destroy() — удаление функционала сортировки.

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

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

Оглавление