DndContext, useDraggable e useDroppable

Ogni funzionalità di drag and drop in dnd-kit deve essere racchiusa in un componente DndContext. DndContext è l'hub di coordinamento: tiene traccia dei trascinamenti attivi, mette in comunicazione gli elementi trascinabili con quelli che accettano il rilascio e attiva i callback degli eventi. In genere lo si colloca al livello del componente che gestisce lo stato del trascinamento.

L'hook useDraggable({ id }) rende trascinabile un componente. Restituisce quattro valori fondamentali: attributes (proprietà ARIA da applicare all'elemento), listeners (gestori degli eventi per avviare il trascinamento), setNodeRef (collega il ref dell'elemento trascinabile) e transform (la traslazione corrente come {x, y, scaleX, scaleY}).

Per collegare un elemento trascinabile, applichi attributes e listeners all'elemento e passi setNodeRef come prop ref. Gli attributi includono role="button", tabIndex e proprietà aria. I listener collegano i gestori degli eventi del puntatore e della tastiera necessari a dnd-kit per rilevare l'inizio del trascinamento.

Il valore transform restituito da useDraggable è null quando non si sta trascinando e diventa un oggetto di coordinate durante il trascinamento. Lo si converte in una stringa CSS usando CSS.Translate.toString(transform) del package @dnd-kit/utilities. Lo si applica come proprietà CSS transform all'elemento trascinabile, così che segua visivamente il cursore.

L'hook useDroppable({ id }) indica che un contenitore è una destinazione valida per il rilascio. Restituisce isOver (un booleano che vale true mentre un elemento trascinabile si trova sopra questa destinazione) e setNodeRef per collegare il ref all'elemento droppable. A differenza di useDraggable, non ci sono listener di eventi da applicare.

Il valore isOver di useDroppable consente di fornire un feedback visivo durante il trascinamento. Quando isOver è true, è possibile applicare un colore di evidenziazione, un bordo o una modifica dello sfondo alla zona di rilascio. Questo aiuta gli utenti a capire dove possono rilasciare l'elemento, un aspetto fondamentale per usabilità e accessibilità.

La callback onDragEnd su DndContext riceve un oggetto evento con due proprietà importanti: event.active contiene l'elemento trascinato, incluso il relativo id, mentre event.over contiene la destinazione del rilascio, oppure null se l'elemento viene rilasciato fuori da qualsiasi destinazione droppable. Si utilizzano questi ID per aggiornare lo stato dell'applicazione.

In onDragEnd, dopo aver verificato che event.over non sia null, aggiorni lo stato per riflettere lo spostamento. Ad esempio, se sta spostando una card tra le colonne di una bacheca Kanban, rimuova la card dalla colonna di origine e la aggiunga alla colonna di destinazione identificata da event.over.id.

DragOverlay esegue il rendering di un'anteprima fluttuante dell'elemento trascinato che segue il cursore. Viene renderizzato come un portale (al di fuori del normale albero DOM), quindi non viene mai ritagliato dai contenitori con overflow:hidden. A differenza dell'elemento originale, all'overlay si possono applicare ombre esterne, trasformazioni di scala o rotazioni per indicare che l'elemento è in fase di trascinamento.

Per eseguire il rendering del contenuto corretto in DragOverlay, tenga traccia dell'elemento attualmente trascinato usando il callback onDragStart. Memorizzi l'ID attivo nello stato: setActiveDragId(event.active.id). In onDragEnd, lo reimposti a null. All'interno di DragOverlay, usi activeDragId per cercare l'elemento corretto ed eseguirne il rendering.

Una vera interfaccia di drag-and-drop combina DndContext, più elementi useDraggable, più aree useDroppable e la gestione dello stato per tenere traccia della posizione di ogni elemento. Il punto fondamentale è che dnd-kit fornisce i meccanismi: spetta a Lei aggiornare lo stato in onDragEnd e renderizzare nuovamente l'interfaccia per riflettere la nuova disposizione.

Quale utility converte l'oggetto transform di useDraggable in una stringa CSS transform?

DndContext è il centro di coordinamento per tutte le operazioni di trascinamento di dnd-kit. useDraggable fornisce attributi, listener, setNodeRef e transform per gli elementi trascinabili. useDroppable fornisce isOver e setNodeRef per i target di rilascio. onDragEnd fornisce event.active.id e event.over?.id, che può usare per aggiornare lo stato. DragOverlay esegue il rendering di un'anteprima fluttuante basata su un portale.