Overlay personalizzati per il drag e DnD tra più contenitori

DragOverlay esegue il rendering del contenuto come portale React, aggiungendolo direttamente a document.body anziché all'interno dell'albero DOM di DndContext. In questo modo non viene mai ritagliato dai contenitori con overflow:hidden o overflow:scroll e appare sempre sopra tutti gli altri elementi senza richiedere una gestione manuale di z-index.

Poiché DragOverlay è separato dall'elemento originale, può avere stili visivi che comprometterebbero il layout se applicati all'originale. Può aggiungere un'ombra esterna, una trasformazione di scala (rendendolo leggermente più grande dell'originale) o un effetto di rotazione. Questi segnali visivi comunicano all'utente che l'elemento è "sollevato" e in movimento.

DragOverlay deve sapere che cosa renderizzare. Tenga traccia dell'ID del trascinamento attivo nello stato: lo imposti in onDragStart con event.active.id e lo cancelli in onDragEnd con null. All'interno di DragOverlay, usi questo ID per trovare i dati dell'elemento corrispondente e renderizzare il componente di anteprima corretto.

Quando usa DragOverlay, l'elemento trascinabile originale dovrebbe diventare un segnaposto visivo durante il trascinamento. Se usa useSortable, applichi opacity: 0 o un bordo tratteggiato quando isDragging è true. In questo modo vengono mostrati lo "slot" in cui l'elemento tornerà se il trascinamento viene annullato e lo spazio che lascia quando viene spostato in una nuova posizione.

Il drag-and-drop tra più contenitori consente di trascinare gli elementi tra due o più liste separate. La configurazione richiede un singolo DndContext che racchiuda tutti i contenitori, ognuno dei quali deve avere il proprio SortableContext. Tutti gli ID degli elementi di tutti i contenitori devono essere univoci a livello globale per evitare collisioni.

Per ottenere un'animazione fluida tra contenitori diversi, aggiorni lo stato in onDragOver invece di attendere onDragEnd. Quando l'elemento trascinato entra in un nuovo contenitore, lo sposti immediatamente dal contenitore di origine a quello di destinazione. In questo modo l'utente riceve un feedback visivo in tempo reale sulla posizione in cui verrà rilasciato l'elemento.

Quando si trascina tra più istanze di SortableContext, tutti gli ID degli elementi devono essere univoci nell'intero DndContext, non solo all'interno di ogni lista. Se due contenitori condividono un ID, dnd-kit non può determinare quale elemento sia attivo. Usi UUID o anteponga agli ID il nome del contenitore per garantire l'univocità globale.

useDraggable e useSortable accettano un'opzione data: useSortable({ id, data: { containerId, type } }). Questi dati sono disponibili nei callback degli eventi di trascinamento come event.active.data.current. Negli scenari con più contenitori, può memorizzare nei dati l'ID del contenitore di origine e usarlo in onDragOver per sapere da dove proviene l'elemento.

Lo stato per più contenitori usa in genere un oggetto indicizzato per ID del contenitore, ciascuno dei quali contiene un array di elementi. In onDragOver, quando l'elemento attivo si trova in un contenitore diverso da quello del target indicato da over, rimuova l'elemento dall'array del contenitore di origine e lo inserisca nell'array del contenitore di destinazione nella posizione corretta.

KeyboardSensor funziona anche con il DnD tra più contenitori. Gli utenti premono i tasti freccia per spostarsi tra gli elementi all'interno di un contenitore e, quando raggiungono il bordo, possono continuare verso i contenitori adiacenti. L'algoritmo collisionDetection di SortableContext determina il target di rilascio valido più vicino in base alla posizione.

DndContext accetta una prop collisionDetection che determina il modo in cui calcola su quale elemento droppable si trova l'elemento trascinato. L'impostazione predefinita closestCenter funziona bene per la maggior parte delle liste. closestCorners è più adatta alle griglie. pointerWithin attiva un elemento droppable solo quando il cursore si trova fisicamente al suo interno.

Dove esegue il rendering del contenuto DragOverlay nel DOM?

DragOverlay viene renderizzato come un portale in document.body, mantenendo l'indipendenza visiva dai vincoli del layout. Tenga traccia di activeDragId in onDragStart/onDragEnd per renderizzare il contenuto corretto dell'overlay. Il DnD tra più contenitori usa più istanze di SortableContext all'interno di un unico DndContext, con ID univoci a livello globale. Aggiorni lo stato in onDragOver per ottenere animazioni fluide tra contenitori, usando event.active.data.current per i metadati del contenitore di origine.