SortableContext för omordningsbara listor

SortableContext är en specialiserad dnd-kit-komponent som omsluter en lista vars ordning kan ändras. Medan useDraggable och useDroppable hanterar godtycklig dra-och-släpp-funktionalitet hanterar SortableContext specifikt situationer där listobjekt behöver ordnas om genom att dras till en ny position.

SortableContext kräver en items-prop: en array med unika ID:n av typen sträng eller tal som motsvarar ID:na i de underordnade sorterbara komponenterna. Arrayens ordning anger objektens aktuella ordning. När ni uppdaterar denna array i state renderas listan om i den nya ordningen.

SortableContext accepterar en strategy-prop som styr hur objekten sorteras. verticalListSortingStrategy är avsedd för vertikala listor och beräknar infogningspunkten utifrån den vertikala positionen. horizontalListSortingStrategy är avsedd för horisontella listor. rectSortingStrategy är avsedd för rutnät. Välj den strategi som passar er layout.

Inuti SortableContext använder varje listobjekt hooken useSortable({ id }) i stället för useDraggable. useSortable är en superset av useDraggable — den returnerar samma attributes, listeners, setNodeRef och transform, samt ytterligare värden som är specifika för sortering, till exempel isDragging och overIndex.

Värdet isDragging från useSortable är true medan objektet aktivt dras. Vanligtvis använder ni det för att minska opaciteten eller lägga till en platshållarstil på originalobjektet i listan medan det dras. Det visuella mellanrummet visar användaren var objektet för närvarande befinner sig i listan.

dnd-kit exporterar verktyget arrayMove(array, fromIndex, toIndex) från @dnd-kit/sortable. Det returnerar en ny array där objektet på fromIndex har flyttats till toIndex. Det här är standard sättet att uppdatera er state-array när en sorteringsdragning har slutförts.

I callbacken onDragEnd i DndContext för en sorterbar lista hittar ni det gamla och det nya indexet med hjälp av items.indexOf(event.active.id) och items.indexOf(event.over?.id). Om båda indexen är giltiga och olika anropar ni setItems(arrayMove(items, oldIndex, newIndex)) för att ordna om arrayen.

När ett objekt dras animeras de andra objekten i listan till nya positioner för att visa var det dragna objektet kommer att hamna. useSortable tillhandahåller en CSS-transform för varje objekt som inte dras, så att det flyttas åt sidan. Om ni lägger till en CSS-transition för denna transform skapas en mjuk förflyttningsanimering.

Tillämpa en CSS-transition på transform-egenskapen för sorterbara objekt: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. När ett objekt dras behövs ingen transition eftersom det ska följa markören direkt. När andra objekt förskjuts skapar en transition en mjuk glidanimering.

För bästa användarupplevelse kombinerar ni SortableContext med DragOverlay. Det dragna objektet i listan blir en halvtransparent platshållare med hjälp av isDragging, medan DragOverlay renderar en ogenomskinlig, upphöjd kopia som följer markören. På så sätt undviker ni visuella störningar där det dragna objektet hoppar mellan positioner.

SortableContext fungerar lika bra för vertikala listor (uppgiftsbrädor och att-göra-listor) som för horisontella listor (flikrader och bildkaruseller). Byt strategi genom att ändra strategy-propen. Ni kan även använda den för en rutnätslayout med rectSortingStrategy, som beräknar den närmaste rutnätscellen utifrån dragningens position.

SortableContext omsluter en lista vars ordning kan ändras och kräver en items-array med unika ID:n samt en strategi (vertikal, horisontell eller rutnätsbaserad). Varje objekt använder useSortable i stället för useDraggable och får då tillgång till isDragging och overIndex. I onDragEnd ordnar arrayMove(items, oldIndex, newIndex) om arrayen. CSS-transitioner på transform-egenskapen animerar förskjutna objekt på ett mjukt sätt.