Тестирование на устройствах

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

Установка и подключение

Для работы с библиотекой можно использовать CDN или пакетный менеджер npm:

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

или

npm install sortablejs

После подключения можно создать новый объект Sortable для выбранного контейнера:

const el = document.getElementById('items');
const sortable = new Sortable(el, {
    animation: 150,
    ghostClass: 'sortable-ghost'
});

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

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

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

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

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

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

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

Перетаскивание между списками

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

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

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

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

Параметр group можно настроить более детально:

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

Стилизация элементов

Для плавной работы интерфейса важно правильно настроить стили:

.sortable-ghost {
    opacity: 0.4;
    background-color: #f0f0f0;
}

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

.sortable-drag {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
  • sortable-ghost — элемент-призрак во время перемещения.
  • sortable-chosen — элемент, который пользователь выбрал.
  • sortable-drag — активный элемент во время перетаскивания.

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

Для сохранения порядка элементов в форме можно использовать скрытые поля:

<ul id="tasks">
    <li data-id="1">Задача 1</li>
    <li data-id="2">Задача 2</li>
</ul>
<input type="hidden" name="task_order" id="task_order">
sortable.option('onEnd', function (evt) {
    const order = sortable.toArray();
    document.getElementById('task_order').value = order.join(',');
});

Метод toArray() возвращает массив id элементов в текущем порядке, что позволяет отправлять данные на сервер.

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

  • Ограничение количества перетаскиваемых элементов на странице снижает нагрузку.
  • Использование animation с разумным временем (100–200 мс) делает интерфейс плавным, не перегружая браузер.
  • Для больших списков рекомендуется виртуализация элементов совместно с SortableJS.

Совместимость с мобильными устройствами

SortableJS поддерживает мобильные платформы с сенсорным управлением. Для оптимальной работы следует учитывать:

  • touchStartThreshold — минимальное расстояние перед началом перетаскивания на сенсорных устройствах.
  • Избегать конфликтов с библиотеками свайпов и тач-событий.
  • Настраивать стили для адаптивного интерфейса: увеличенные зоны для касания элементов, плавная анимация.

Методы управления

  • sort() — сортирует элементы по заданному критерию.
  • save() — сохраняет текущее состояние сортировки (часто используется с localStorage).
  • destroy() — удаляет Sortable с элемента, очищая обработчики событий.

Пример сохранения порядка в localStorage:

sortable.option('onEnd', function () {
    localStorage.setItem('order', JSON.stringify(sortable.toArray()));
});

window.addEventListener('load', function () {
    const savedOrder = JSON.parse(localStorage.getItem('order'));
    if (savedOrder) {
        savedOrder.forEach(id => {
            const el = document.querySelector(`[data-id="${id}"]`);
            el && el.parentNode.appendChild(el);
        });
    }
});

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

SortableJS можно расширять с помощью плагинов:

  • MultiDrag — выбор нескольких элементов для перемещения.
  • Swap — обмен элементов местами при перетаскивании.
  • AutoScroll — автоматическая прокрутка контейнера при перетаскивании к краю.

Пример включения MultiDrag:

Sortable.mount(new Sortable.MultiDrag());
const multiSortable = new Sortable(document.getElementById('multi'), {
    multiDrag: true,
    selectedClass: 'selected',
    animation: 150
});

Практические советы

  • Всегда задавать уникальные id для элементов, чтобы корректно работать с методами toArray() и sort().
  • Для динамически добавляемых элементов использовать sortable.option('draggable', 'li') после вставки новых элементов.
  • Проверять совместимость с другими библиотеками UI, чтобы избежать конфликтов событий.

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

Оглавление