SortableContext dla list ze zmianą kolejności

SortableContext to specjalizowany komponent dnd-kit, który opakowuje listę, której kolejność można zmieniać. Podczas gdy useDraggable i useDroppable obsługują dowolne przeciąganie i upuszczanie, SortableContext jest przeznaczony konkretnie do sytuacji, w której elementy listy należy uporządkować na nowo przez przeciągnięcie ich w inne miejsce.

SortableContext wymaga propu items: tablicy unikalnych identyfikatorów typu string lub number, odpowiadających identyfikatorom używanym w podrzędnych komponentach sortowalnych. Kolejność tej tablicy określa bieżącą kolejność elementów. Po zaktualizowaniu tej tablicy w stanie lista zostanie ponownie wyrenderowana w nowej kolejności.

SortableContext przyjmuje prop strategy, który określa sposób sortowania elementów. verticalListSortingStrategy służy do list pionowych i oblicza punkt wstawienia na podstawie położenia w pionie. horizontalListSortingStrategy służy do list poziomych. rectSortingStrategy służy do siatek. Należy wybrać strategię odpowiadającą układowi interfejsu.

Wewnątrz SortableContext każdy element listy korzysta z hooka useSortable({ id }) zamiast useDraggable. useSortable jest rozszerzeniem useDraggable — zwraca te same atrybuty, listenery, setNodeRef i transform, a także dodatkowe wartości związane z sortowaniem, takie jak isDragging i overIndex.

Wartość isDragging z useSortable wynosi true, gdy element jest aktywnie przeciągany. Zwykle służy ona do zmniejszenia krycia oryginalnego elementu na liście albo dodania mu stylu zastępczego na czas przeciągania. Ta wizualna luka pokazuje użytkownikowi, gdzie element znajduje się obecnie na liście.

dnd-kit eksportuje narzędzie arrayMove(array, fromIndex, toIndex) z @dnd-kit/sortable. Zwraca ono nową tablicę, w której element znajdujący się pod indeksem fromIndex został przeniesiony pod indeks toIndex. Jest to standardowy sposób aktualizowania tablicy stanu po zakończeniu sortowania przez przeciąganie.

W callbacku onDragEnd komponentu DndContext dla listy sortowalnej należy znaleźć stary i nowy indeks za pomocą items.indexOf(event.active.id) oraz items.indexOf(event.over?.id). Jeśli oba indeksy są prawidłowe i różne, należy wywołać setItems(arrayMove(items, oldIndex, newIndex)), aby zmienić kolejność tablicy.

Podczas przeciągania elementu pozostałe elementy listy animują się do nowych pozycji, pokazując, gdzie wyląduje przeciągany element. useSortable udostępnia transformację CSS dla każdego nieprzeciąganego elementu, która przesuwa go, aby zrobić miejsce. Dodanie przejścia CSS do tej transformacji zapewnia płynną animację ruchu.

Należy zastosować przejście CSS dla właściwości transform elementów sortowalnych: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. Gdy element jest przeciągany, przejście nie jest potrzebne, ponieważ powinien bezpośrednio podążać za kursorem. Gdy element zostaje przesunięty, przejście tworzy płynną animację przesuwania.

Aby zapewnić najlepszą obsługę użytkownika, należy połączyć SortableContext z DragOverlay. Przeciągany element na liście staje się półprzezroczystym elementem zastępczym (z użyciem isDragging), a DragOverlay renderuje nieprzezroczystą, uniesioną kopię podążającą za kursorem. Takie podejście pozwala uniknąć błędów wizualnych, w których przeciągany element przeskakuje między pozycjami.

SortableContext równie dobrze sprawdza się w przypadku list pionowych (tablic z zadaniami, list zadań do wykonania) i poziomych (pasków kart, karuzel obrazów). Między strategiami można przełączać się przez zmianę propu strategy. Można go także użyć w układzie siatki ze strategią rectSortingStrategy, która oblicza najbliższą komórkę siatki na podstawie położenia przeciąganego elementu.

Jakie argumenty przyjmuje arrayMove, gdy jest wywoływane wewnątrz onDragEnd w celu zmiany kolejności listy sortowalnej?

SortableContext opakowuje listę, której kolejność można zmieniać, i wymaga tablicy items zawierającej unikalne identyfikatory oraz strategii (pionowej, poziomej lub siatki). Każdy element korzysta z useSortable zamiast useDraggable, zyskując isDragging i overIndex. W onDragEnd funkcja arrayMove(items, oldIndex, newIndex) zmienia kolejność tablicy. Przejścia CSS zastosowane do transform zapewniają płynną animację przesuwanych elementów.