Таблицы с сортировкой строк

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

Для подключения библиотеки достаточно добавить её через CDN или установить через npm:

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

или через npm:

npm install sortablejs

Инициализация сортируемой таблицы

Чтобы сделать строки таблицы сортируемыми, необходимо выбрать контейнер <tbody> и создать новый экземпляр Sortable:

const tableBody = document.querySelector('#myTable tbody');

const sortable = new Sortable(tableBody, {
    animation: 150,
    handle: '.drag-handle',
    ghostClass: 'sortable-ghost',
    chosenClass: 'sortable-chosen',
    swapThreshold: 0.65,
});

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

  • animation — задаёт скорость анимации при перетаскивании в миллисекундах.
  • handle — определяет элемент внутри строки, за который можно захватывать объект.
  • ghostClass — CSS-класс для визуального эффекта “тени” перетаскиваемого элемента.
  • chosenClass — класс для строки, которая выбрана для перемещения.
  • swapThreshold — порог срабатывания перестановки при наведении на соседние элементы.

Настройка перетаскивания по колонкам

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

<tr>
    <td class="drag-handle">☰</td>
    <td>Элемент 1</td>
    <td>Описание</td>
</tr>

Это предотвращает случайное перемещение при клике по другим ячейкам таблицы и повышает UX.

События SortableJS

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

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

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

sortable.option("onEnd", function(evt) {
    const order = Array.from(tableBody.querySelectorAll('tr'))
                       .map(row => row.dataset.id);
    fetch('/update-order', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({order})
    });
});

Работа с группами и переносом между таблицами

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

const table1 = document.querySelector('#table1 tbody');
const table2 = document.querySelector('#table2 tbody');

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

Использование одного имени группы (group: 'shared') позволяет свободно перемещать строки между таблицами с сохранением анимации.

Поддержка сложной логики при сортировке

Можно запретить перемещение определённых строк, например, фиксированных заголовков или итоговых строк:

const sortable = new Sortable(tableBody, {
    handle: '.drag-handle',
    filter: '.no-drag',
    onMove(evt) {
        return !evt.related.classList.contains('no-drag');
    }
});
  • filter — позволяет указать элементы, которые не могут быть перетащены.
  • onMove — возможность динамически блокировать или разрешать перемещение на основе условий.

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

Для улучшения визуального восприятия рекомендуется использовать классы ghostClass и chosenClass. Пример CSS:

.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    background-color: #f0f0f0;
    border: 1px dashed #999;
}

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

tbody tr {
    transition: transform 0.15s ease;
}

Динамическое добавление и удаление строк

SortableJS корректно работает с динамически добавленными элементами. Достаточно повторно инициализировать экземпляр или использовать метод Sortable.utils, чтобы обновить список:

sortable.addEventListener('onAdd', function(evt) {
    // Логика для добавленного элемента
});

Для удаления строки достаточно удалить элемент из DOM, а библиотека автоматически скорректирует порядок оставшихся элементов.

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

SortableJS легко интегрируется с популярными фреймворками, такими как React, Vue и Angular, через официальные обёртки или нативные методы. Для React существует компонент react-sortablejs, который поддерживает работу с состоянием и ререндерингом таблиц без потери функциональности drag-and-drop.

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

Оглавление