sort и метод сортировки

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

Библиотека работает через создание экземпляра Sortable на выбранном контейнере 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-класс для элемента, который пользователь захватил.

Настройка базовой сортировки

Сортировка элементов в SortableJS строится на управлении порядком элементов DOM. После инициализации сортировки, библиотека отслеживает движение мыши и динамически переставляет элементы.

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

  • set — позволяет программно установить порядок элементов.
  • toArray — возвращает массив идентификаторов элементов в текущем порядке.
  • sort — метод, который позволяет задать пользовательскую функцию сортировки элементов.

Пример получения текущего порядка элементов:

const currentOrder = sortable.toArray();
console.log(currentOrder);

Здесь каждый элемент должен иметь уникальный атрибут data-id, который используется библиотекой для идентификации:

<ul id="sortable-list">
    <li data-id="1">Элемент 1</li>
    <li data-id="2">Элемент 2</li>
    <li data-id="3">Элемент 3</li>
</ul>

Метод sort и пользовательские функции сортировки

Метод sort в SortableJS позволяет вручную задавать порядок элементов, используя стандартный подход JavaScript с функцией сравнения. Он принимает функцию, возвращающую порядок элементов по определённым критериям.

Пример сортировки по текстовому содержимому элементов:

sortable.sort((a, b) => {
    const textA = a.textContent.trim().toLowerCase();
    const textB = b.textContent.trim().toLowerCase();
    if (textA < textB) return -1;
    if (textA > textB) return 1;
    return 0;
});

Особенности метода sort:

  • Сортировка применяется только к DOM-элементам внутри контейнера.
  • Функция сравнения получает элементы HTMLElement, а не их значения напрямую.
  • Можно комбинировать сортировку с анимацией, чтобы изменение порядка визуально плавно отображалось.

Обработка событий при сортировке

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

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

Пример:

const sortable = new Sortable(list, {
    animation: 150,
    onEnd: (evt) => {
        console.log(`Элемент ${evt.item.textContent} перемещён с позиции ${evt.oldIndex} на ${evt.newIndex}`);
    }
});

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

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

SortableJS поддерживает следующие ключевые функции:

  • Группировка элементов (group) — позволяет перемещать элементы между несколькими списками.
  • Фильтрация элементов (filter) — исключает определённые элементы из сортировки.
  • Сортировка по ограниченной оси (axis) — позволяет перемещать элементы только горизонтально или вертикально.
  • Стабильность позиции — библиотека автоматически корректирует порядок при удалении или добавлении элементов.

Пример ограниченной сортировки по вертикали с исключением элементов:

new Sortable(list, {
    animation: 150,
    axis: 'y',
    filter: '.no-drag',
    onMove: (evt) => {
        return !evt.related.classList.contains('no-drag');
    }
});

Интеграция с современными фреймворками

SortableJS легко интегрируется с React, Vue и Angular. В случае React обычно используется обёртка react-sortablejs, которая обеспечивает корректное управление состоянием компонентов:

import { ReactSortable } from "react-sortablejs";

const items = [
    { id: 1, name: "Элемент 1" },
    { id: 2, name: "Элемент 2" }
];

<ReactSortable list={items} setList={setItems}>
    {items.map(item => <div key={item.id}>{item.name}</div>)}
</ReactSortable>

Это позволяет синхронизировать порядок элементов с состоянием приложения, что критично при динамических интерфейсах.

Практические рекомендации

  • Всегда использовать уникальные идентификаторы для элементов при сортировке.
  • Для больших списков рекомендуется включать анимацию и минимизировать перерисовку DOM для производительности.
  • Обрабатывать события onUpdate и onEnd для синхронизации порядка элементов с внешними источниками данных.
  • Использовать фильтры и ограничения оси для предотвращения случайного перемещения элементов.

SortableJS предоставляет гибкую и надёжную систему сортировки, которая масштабируется от простых списков до сложных интерфейсов с множеством контейнеров и динамическими элементами.

Оглавление