Aangepaste drag overlays en DnD met meerdere containers

DragOverlay geeft de inhoud weer als een React-portal en voegt deze rechtstreeks toe aan document.body in plaats van binnen de DOM-boom van DndContext. Daardoor wordt de inhoud nooit afgeknipt door containers met overflow:hidden of overflow:scroll en verschijnt deze altijd boven alle andere elementen, zonder dat je z-index handmatig hoeft te beheren.

Omdat DragOverlay losstaat van het oorspronkelijke element, kan de overlay visuele stijlen hebben die de indeling zouden verstoren als je ze op het oorspronkelijke element toepast. Je kunt een slagschaduw, een schaaltransformatie (waardoor de overlay iets groter wordt dan het origineel) of een rotatie-effect toevoegen. Deze visuele aanwijzingen laten de gebruiker zien dat het item is 'opgetild' en in beweging is.

DragOverlay moet weten wat het moet weergeven. Houd de actieve sleep-ID bij in de status: stel deze in onDragStart in met event.active.id en wis deze in onDragEnd met null. Gebruik die ID binnen DragOverlay om de bijbehorende itemgegevens te vinden en de juiste voorbeeldcomponent weer te geven.

Bij gebruik van DragOverlay moet het oorspronkelijke versleepbare item tijdens het slepen een visuele tijdelijke aanduiding worden. Als je useSortable gebruikt, pas je opacity: 0 of een stippelrand toe wanneer isDragging true is. Zo ziet de gebruiker de plek waarnaar het item terugkeert als het slepen wordt geannuleerd en de ruimte die het achterlaat wanneer het naar een nieuwe positie wordt verplaatst.

Slepen en neerzetten met meerdere containers betekent dat items tussen twee of meer afzonderlijke lijsten kunnen worden verplaatst. De configuratie vereist één DndContext die alle containers omhult, waarbij elke container een eigen SortableContext heeft. Alle item-ID's in alle containers moeten wereldwijd uniek zijn om botsingen te voorkomen.

Werk voor een vloeiende animatie tussen containers de status bij in onDragOver in plaats van te wachten op onDragEnd. Wanneer het gesleepte item een nieuwe container binnengaat, verplaats je het onmiddellijk van de broncontainer naar de doelcontainer. Zo krijgt de gebruiker realtime visuele terugkoppeling over waar het item terechtkomt.

Bij het slepen tussen meerdere SortableContext-instanties moeten alle item-ID's uniek zijn binnen de volledige DndContext — niet alleen binnen elke lijst. Als twee containers dezelfde ID delen, kan dnd-kit niet bepalen welk item actief is. Gebruik UUID's of geef ID's de containernaam als voorvoegsel om overal unieke ID's te garanderen.

useDraggable en useSortable accepteren een data-optie: useSortable({ id, data: { containerId, type } }). Deze gegevens zijn in callbacks voor sleepgebeurtenissen beschikbaar als event.active.data.current. In scenario's met meerdere containers kun je de ID van de broncontainer in data opslaan en deze in onDragOver gebruiken om te weten waar het item vandaan komt.

De status van meerdere containers gebruikt meestal een object met container-ID's als sleutels, waarbij elke sleutel een array met items bevat. Wanneer het actieve item in onDragOver in een andere container staat dan het neerzetdoel, verwijder je het item uit de array van de broncontainer en voeg je het op de juiste positie toe aan de array van de doelcontainer.

KeyboardSensor werkt voor slepen en neerzetten met meerdere containers. Gebruikers drukken op de pijltoetsen om binnen een container tussen items te bewegen. Wanneer ze de rand van een container bereiken, kunnen ze doorgaan naar aangrenzende containers. Het collisionDetection-algoritme van SortableContext bepaalt op basis van de positie het dichtstbijzijnde geldige neerzetdoel.

DndContext accepteert een collisionDetection-eigenschap die bepaalt hoe wordt berekend boven welk neerzetdoel het gesleepte item zich bevindt. De standaardwaarde closestCenter werkt goed voor de meeste lijsten. closestCorners is beter voor rasters. pointerWithin activeert een neerzetdoel alleen wanneer de cursor zich er daadwerkelijk binnen bevindt.

DragOverlay wordt als portal naar document.body weergegeven en is daardoor visueel onafhankelijk van beperkingen van de indeling. Houd activeDragId bij in onDragStart/onDragEnd om de juiste overlay-inhoud weer te geven. Slepen en neerzetten met meerdere containers gebruikt meerdere SortableContext-instanties binnen één DndContext, met wereldwijd unieke ID's. Werk de status bij in onDragOver voor vloeiende animaties tussen containers en gebruik event.active.data.current voor metagegevens van de broncontainer.