DndContext, useDraggable en useDroppable

Elke functie voor slepen en neerzetten in dnd-kit moet in een DndContext-component worden gewikkeld. DndContext is het coördinatiecentrum: het houdt actieve sleepacties bij, verzorgt de communicatie tussen sleepbare en neerzetbare elementen en voert gebeurtenis-callbacks uit. Je plaatst dit doorgaans op het niveau van de component die de sleepstatus beheert.

De useDraggable({ id })-hook maakt een component sleepbaar. De hook retourneert vier belangrijke waarden: attributes (ARIA-props die je over het element uitspreidt), listeners (gebeurtenisverwerkers voor het starten van het slepen), setNodeRef (koppelt de verwijzing naar het sleepbare element) en transform (de huidige verplaatsing als {x, y, scaleX, scaleY}).

Om een sleepbaar element te koppelen, spreid je attributes en listeners uit over het element en geef je setNodeRef door als de ref-eigenschap. De attributen bevatten role="button", tabIndex en aria-eigenschappen. De listeners koppelen de muis- en toetsenbordverwerkers die dnd-kit nodig heeft om het begin van het slepen te detecteren.

De waarde transform uit useDraggable is null wanneer er niet wordt gesleept en een coördinatenobject tijdens het slepen. Je zet deze om naar een CSS-tekenreeks met CSS.Translate.toString(transform) uit het pakket @dnd-kit/utilities. Pas dit toe als de CSS-eigenschap transform op het sleepbare element, zodat het visueel de cursor volgt.

De useDroppable({ id })-hook markeert een container als geldig neerzetdoel. De hook retourneert isOver (een boolean die true is zolang een sleepbaar element boven dit neerzetdoel zweeft) en setNodeRef om de verwijzing aan het neerzetbare element te koppelen. In tegenstelling tot useDraggable zijn er geen gebeurtenislisteners die je moet uitspreiden.

De waarde isOver uit useDroppable stelt je in staat visuele feedback te geven tijdens het slepen. Wanneer isOver true is, kun je een markeringskleur, rand of achtergrondwijziging toepassen op de neerzetzone. Dit helpt gebruikers te begrijpen waar ze het item kunnen neerzetten, wat essentieel is voor gebruiksvriendelijkheid en toegankelijkheid.

De callback onDragEnd op DndContext ontvangt een gebeurtenisobject met twee belangrijke eigenschappen: event.active bevat het gesleepte item, inclusief de id, en event.over bevat het neerzetdoel, of null als het item buiten elk neerzetbaar element is neergezet. Je gebruikt deze ID's om de status van je toepassing bij te werken.

In onDragEnd controleer je eerst of event.over niet null is. Daarna werk je je status bij zodat de verplaatsing erin is verwerkt. Als je bijvoorbeeld een kaart tussen kolommen op een Kanban-bord verplaatst, verwijder je de kaart uit de bronkolom en voeg je deze toe aan de doelkolom die wordt aangeduid door event.over.id.

DragOverlay geeft een zwevende voorbeeldweergave van het gesleepte item weer die de cursor volgt. Het wordt weergegeven als een portal (buiten de normale DOM-boom), zodat het nooit wordt afgeknipt door containers met overflow:hidden. In tegenstelling tot het oorspronkelijke element kan de overlay slagschaduwen, schaaltransformaties of rotatie hebben om aan te geven dat het wordt gesleept.

Om de juiste inhoud in DragOverlay weer te geven, houd je met de callback onDragStart bij welk item momenteel wordt gesleept. Sla de actieve ID op in de status met setActiveDragId(event.active.id). Zet deze in onDragEnd terug op null. Gebruik binnen DragOverlay activeDragId om het juiste item op te zoeken en weer te geven.

Een echte interface voor slepen en neerzetten combineert DndContext, meerdere useDraggable-elementen, meerdere useDroppable-zones en statusbeheer om bij te houden welk item waar staat. Het belangrijkste inzicht is dat dnd-kit de mechanica levert — het is aan jou om de status in onDragEnd bij te werken en de interface opnieuw weer te geven zodat de nieuwe indeling zichtbaar wordt.

DndContext is het coördinatiepunt voor alle sleepbewerkingen van dnd-kit. useDraggable levert attributen, luisteraars, setNodeRef en transform voor versleepbare elementen. useDroppable levert isOver en setNodeRef voor neerzetdoelen. onDragEnd geeft je event.active.id en event.over?.id om de status bij te werken. DragOverlay geeft een zwevende voorbeeldweergave op basis van een portal weer.