SortableContext für umsortierbare Listen

SortableContext ist eine spezialisierte dnd-kit-Komponente, die eine Liste mit änderbarer Reihenfolge umschließt. Während useDraggable und useDroppable beliebige Drag-and-drop-Vorgänge verarbeiten, ist SortableContext speziell für den Fall gedacht, dass Elemente einer Liste durch Ziehen an eine neue Position neu angeordnet werden sollen.

SortableContext benötigt eine items-Prop: ein Array aus eindeutigen String- oder Number-IDs, die mit den IDs der untergeordneten Sortable-Komponenten übereinstimmen. Die Reihenfolge dieses Arrays definiert die aktuelle Reihenfolge der Elemente. Wenn Sie dieses Array im Zustand aktualisieren, wird die Liste in der neuen Reihenfolge erneut gerendert.

SortableContext akzeptiert eine strategy-Prop, die festlegt, wie Elemente sortiert werden. verticalListSortingStrategy ist für vertikale Listen gedacht und berechnet den Einfügepunkt anhand der vertikalen Position. horizontalListSortingStrategy ist für horizontale Listen gedacht. rectSortingStrategy ist für Raster geeignet. Wählen Sie die Strategie, die zu Ihrem Layout passt.

Innerhalb von SortableContext verwendet jedes Listenelement den Hook useSortable({ id }) anstelle von useDraggable. useSortable ist eine Obermenge von useDraggable – es liefert dieselben attributes, listeners, setNodeRef und transform sowie zusätzliche sortierspezifische Werte wie isDragging und overIndex.

Der Wert isDragging aus useSortable ist true, solange das Element aktiv gezogen wird. Typischerweise verwenden Sie ihn, um die Deckkraft zu verringern oder dem ursprünglichen Listenelement während des Ziehens einen Platzhalterstil zu geben. Diese visuelle Lücke zeigt der Benutzerin bzw. dem Benutzer, wo sich das Element derzeit in der Liste befindet.

dnd-kit exportiert die Hilfsfunktion arrayMove(array, fromIndex, toIndex) aus @dnd-kit/sortable. Sie gibt ein neues Array zurück, in dem das Element an fromIndex an die Position toIndex verschoben wurde. Dies ist die übliche Methode, um Ihr Zustandsarray zu aktualisieren, wenn ein Sortiervorgang durch Ziehen abgeschlossen ist.

Im DndContext-Callback onDragEnd für eine sortierbare Liste ermitteln Sie die alten und neuen Indizes mithilfe von items.indexOf(event.active.id) und items.indexOf(event.over?.id). Wenn beide Indizes gültig und unterschiedlich sind, rufen Sie setItems(arrayMove(items, oldIndex, newIndex)) auf, um das Array neu zu sortieren.

Wenn ein Element gezogen wird, bewegen sich die anderen Elemente der Liste an neue Positionen, um zu zeigen, wo das gezogene Element abgelegt wird. useSortable stellt für jedes nicht gezogene Element eine CSS-Transformation bereit, die es aus dem Weg bewegt. Wenn Sie diese Transformation mit einer CSS-Transition versehen, entsteht eine flüssige Bewegungsanimation.

Wenden Sie auf die transform-Eigenschaft sortierbarer Elemente eine CSS-Transition an: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. Während ein Element gezogen wird, ist keine Transition erforderlich, da es dem Cursor direkt folgen soll. Wenn andere Elemente verschoben werden, erzeugt eine Transition eine flüssige Gleitbewegung.

Für die beste Benutzererfahrung kombinieren Sie SortableContext mit DragOverlay. Das gezogene Element in der Liste wird zu einem halbtransparenten Platzhalter (mithilfe von isDragging), während DragOverlay eine vollständig sichtbare, erhöhte Kopie rendert, die dem Cursor folgt. Dieser Ansatz vermeidet visuelle Sprünge, bei denen das gezogene Element zwischen Positionen wechselt.

SortableContext funktioniert gleichermaßen gut für vertikale Listen (Aufgabenboards, To-do-Listen) und horizontale Listen (Registerleisten, Bildkarussells). Wechseln Sie zwischen den Strategien, indem Sie die strategy-Prop ändern. Sie können SortableContext sogar für ein Rasterlayout mit rectSortingStrategy verwenden, das anhand der Ziehposition die nächstgelegene Rasterzelle berechnet.

Welche Argumente übernimmt arrayMove, wenn die Funktion innerhalb von onDragEnd aufgerufen wird, um eine sortierbare Liste neu anzuordnen?

SortableContext umschließt eine Liste mit änderbarer Reihenfolge und benötigt ein items-Array mit eindeutigen IDs sowie eine Strategie (vertikal, horizontal oder Raster). Jedes Element verwendet useSortable anstelle von useDraggable und erhält dadurch isDragging und overIndex. In onDragEnd ordnet arrayMove(items, oldIndex, newIndex) das Array neu an. CSS-Transitions auf der transform-Eigenschaft animieren verschobene Elemente flüssig.