SortableContext для изменяемых порядком списков

SortableContext — это специализированный компонент dnd-kit, который оборачивает список с поддержкой перестановки элементов. В то время как useDraggable и useDroppable обрабатывают произвольное перетаскивание, SortableContext предназначен именно для случаев, когда элементы списка нужно переставлять, перетаскивая их на новую позицию.

SortableContext требует свойство items: массив уникальных строковых или числовых идентификаторов, соответствующих идентификаторам, используемым во вложенных сортируемых компонентах. Порядок элементов в этом массиве определяет текущий порядок элементов. Когда Вы обновляете этот массив в состоянии, список повторно отображается в новом порядке.

SortableContext принимает свойство strategy, которое управляет сортировкой элементов. verticalListSortingStrategy предназначена для вертикальных списков и вычисляет точку вставки на основе вертикального положения. horizontalListSortingStrategy предназначена для горизонтальных списков. rectSortingStrategy предназначена для сеток. Выберите стратегию, соответствующую Вашей разметке.

Внутри SortableContext каждый элемент списка использует хук useSortable({ id }) вместо useDraggable. useSortable — это расширенная версия useDraggable: он возвращает те же атрибуты, обработчики, setNodeRef и transform, а также дополнительные значения для сортировки, такие как isDragging и overIndex.

Значение isDragging из useSortable равно true, пока элемент активно перетаскивается. Обычно его используют, чтобы уменьшить непрозрачность исходного элемента в списке или применить к нему стиль заполнителя во время перетаскивания. Этот визуальный пробел показывает пользователю, где сейчас находится элемент в списке.

dnd-kit экспортирует утилиту arrayMove(array, fromIndex, toIndex) из @dnd-kit/sortable. Она возвращает новый массив, в котором элемент с позиции fromIndex перемещён на позицию toIndex. Это стандартный способ обновить массив состояния после завершения перетаскивания для сортировки.

В обратном вызове onDragEnd компонента DndContext для сортируемого списка найдите старый и новый индексы с помощью items.indexOf(event.active.id) и items.indexOf(event.over?.id). Если оба индекса допустимы и различаются, вызовите setItems(arrayMove(items, oldIndex, newIndex)), чтобы изменить порядок массива.

Когда элемент перетаскивается, остальные элементы списка перемещаются с анимацией на новые позиции, показывая, где окажется перетаскиваемый элемент. useSortable предоставляет CSS-трансформацию для каждого неперетаскиваемого элемента, освобождая для него место. Добавление CSS-перехода к этой трансформации создаёт плавную анимацию перемещения.

Примените CSS-переход к свойству трансформации сортируемых элементов: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. Когда элемент перетаскивается, переход не нужен: он должен напрямую следовать за курсором. При перемещении элемента переход создаёт плавную анимацию скольжения.

Для лучшего пользовательского опыта объедините SortableContext с DragOverlay. Перетаскиваемый элемент в списке становится полупрозрачным заполнителем (с использованием isDragging), а DragOverlay отображает его непрозрачную приподнятую копию, следующую за курсором. Такой подход предотвращает визуальные скачки, при которых перетаскиваемый элемент перемещается между позициями.

SortableContext одинаково хорошо работает с вертикальными списками (досками задач, списками дел) и горизонтальными списками (панелями вкладок, каруселями изображений). Переключайтесь между стратегиями, изменяя свойство strategy. Его также можно использовать для сетки со стратегией rectSortingStrategy, которая вычисляет ближайшую ячейку сетки на основе положения перетаскиваемого элемента.

Какие аргументы принимает arrayMove при вызове внутри onDragEnd для изменения порядка сортируемого списка?

SortableContext оборачивает список с поддержкой перестановки и требует массив items с уникальными идентификаторами и стратегию (вертикальную, горизонтальную или сеточную). Каждый элемент использует useSortable вместо useDraggable, получая isDragging и overIndex. В onDragEnd функция arrayMove(items, oldIndex, newIndex) изменяет порядок массива. CSS-переходы для трансформации обеспечивают плавную анимацию перемещаемых элементов.