SortableContext per liste riordinabili

SortableContext è un componente specializzato di dnd-kit che racchiude una lista riordinabile. Mentre useDraggable e useDroppable gestiscono operazioni generiche di drag-and-drop, SortableContext gestisce specificamente il caso in cui gli elementi di una lista debbano essere riordinati trascinandoli in una nuova posizione.

SortableContext richiede una prop items: un array di ID univoci, stringhe o numeri, che corrispondono agli ID usati nei componenti sortable figli. L'ordine di questo array definisce l'ordine corrente degli elementi. Quando aggiorna questo array nello stato, la lista viene nuovamente renderizzata nel nuovo ordine.

SortableContext accetta una prop strategy che controlla il modo in cui vengono ordinati gli elementi. verticalListSortingStrategy è pensata per le liste verticali e calcola il punto di inserimento in base alla posizione verticale. horizontalListSortingStrategy è pensata per le liste orizzontali. rectSortingStrategy è pensata per le griglie. Scelga la strategia più adatta al layout.

All'interno di SortableContext, ogni elemento della lista usa l'hook useSortable({ id }) invece di useDraggable. useSortable è un superset di useDraggable: restituisce gli stessi attributi, listener, setNodeRef e transform, oltre ad altri valori specifici dell'ordinamento, come isDragging e overIndex.

Il valore isDragging di useSortable è true mentre l'elemento viene trascinato attivamente. In genere lo si usa per ridurre l'opacità o aggiungere uno stile segnaposto all'elemento originale nella lista durante il trascinamento. Questo spazio visivo mostra all'utente la posizione attuale dell'elemento nella lista.

dnd-kit esporta l'utility arrayMove(array, fromIndex, toIndex) da @dnd-kit/sortable. Restituisce un nuovo array con l'elemento che si trova in fromIndex spostato in toIndex. Questo è il metodo standard per aggiornare l'array dello stato quando termina un trascinamento di ordinamento.

Nel callback onDragEnd di DndContext per una lista sortable, trovi gli indici precedente e nuovo usando items.indexOf(event.active.id) e items.indexOf(event.over?.id). Se entrambi gli indici sono validi e diversi, chiami setItems(arrayMove(items, oldIndex, newIndex)) per riordinare l'array.

Quando si trascina un elemento, gli altri elementi della lista si animano verso nuove posizioni per mostrare dove verrà rilasciato l'elemento trascinato. useSortable fornisce una trasformazione CSS per ogni elemento non trascinato, che lo sposta per fare spazio. Aggiungendo una transizione CSS a questa trasformazione si ottiene un'animazione fluida del movimento.

Applichi una transizione CSS alla proprietà transform degli elementi sortable: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. Quando un elemento viene trascinato, non è necessaria alcuna transizione, perché deve seguire direttamente il cursore. Quando viene spostato per fare spazio, una transizione crea un'animazione di scorrimento fluida.

Per ottenere la migliore esperienza utente, combini SortableContext con DragOverlay. L'elemento trascinato nella lista diventa un segnaposto semitrasparente usando isDragging, mentre DragOverlay renderizza una copia opaca e sollevata che segue il cursore. Questo approccio evita i difetti visivi per cui l'elemento trascinato salta tra posizioni diverse.

SortableContext funziona altrettanto bene con le liste verticali (bacheche di attività, liste di cose da fare) e con quelle orizzontali (barre delle schede, caroselli di immagini). Può passare da una strategia all'altra modificando la prop strategy. Può anche usarlo per un layout a griglia con rectSortingStrategy, che calcola la cella della griglia più vicina in base alla posizione del trascinamento.

Quali argomenti accetta arrayMove quando viene chiamata all'interno di onDragEnd per riordinare una lista sortable?

SortableContext racchiude una lista riordinabile e richiede un array items di ID univoci e una strategia (verticale, orizzontale o a griglia). Ogni elemento usa useSortable invece di useDraggable, ottenendo isDragging e overIndex. In onDragEnd, arrayMove(items, oldIndex, newIndex) riordina l'array. Le transizioni CSS sulla proprietà transform animano in modo fluido gli elementi spostati.