dnd-kit-arkitektur og tilgængelighedsorienteret design

react-beautiful-dnd var det foretrukne træk-og-slip-bibliotek til React, men blev officielt arkiveret i 2023 og vedligeholdes ikke længere. Fællesskabet samlede sig hurtigt om dnd-kit som den anbefalede erstatning, der blev designet fra bunden med moderne React og tilgængelighed for øje.

dnd-kit er bygget op omkring tre centrale arkitekturbegreber: DndContext håndterer al træk-og-slip-tilstand og koordinerer mellem elementer, der kan trækkes, og elementer, der kan modtage slip, sensorer abstraherer indtastningsmetoder, så den samme træk-og-slip-logik fungerer med mus, berøring og tastatur, og modifikatorer lader dig fastgøre, begrænse eller transformere trækbevægelsen.

dnd-kit leveres med tre indbyggede sensorer. PointerSensor håndterer både input fra mus og berøring via den samlede Pointer Events API. KeyboardSensor aktiverer fuld træk og slip udelukkende med tastaturet. TouchSensor håndterer ældre berøringshændelser. Du konfigurerer sensorer via egenskaben sensors på DndContext.

dnd-kit har indbygget tastaturnavigation af hensyn til tilgængeligheden. Brugere trykker på Mellemrumstasten for at tage et element op, på piletasterne for at flytte det til en ny placering, på mellemrumstasten igen for at slippe det og på Escape-tasten for at annullere trækket uden at foretage ændringer. Disse interaktioner meddeles automatisk til skærmlæsere.

dnd-kit anvender automatisk aria-grabbed på elementer, der kan trækkes, for at angive deres gribetilstand over for hjælpemiddelteknologier. Det bruger aria-dropeffect på slipområder for at kommunikere, hvad der sker, når et element slippes. Et liveområde annoncerer statusopdateringer, så brugere af skærmlæsere hører bekræftelser som "Element taget op" eller "Elementet blev sluppet".

dnd-kit er designet til tree shaking, hvilket betyder, at du kun importerer de dele, du faktisk bruger. Der følger ingen CSS med — du har selv ansvaret for al visuel udformning, så du har fuld kontrol over udseendet af elementer, overlejringer og slipområder. Det holder pakkestørrelserne på et minimum.

DndContext leverer tre primære hændelsestilbagekald til sporing af trækkets livscyklus. onDragStart udløses, når brugeren begynder at trække, og modtager det aktive elements id. onDragOver udløses løbende, mens det trukne element bevæger sig over mål, der kan modtage slip. onDragEnd udløses, når trækket afsluttes, og giver dig det aktive element og slipmålet.

Du sender en liste med sensorkonfigurationer til DndContext ved hjælp af egenskaben sensors kombineret med hooket useSensors. Hver sensor initialiseres med useSensor(SensorClass, options). Du kan f.eks. konfigurere PointerSensor med en minimumsafstand for træk for at forhindre utilsigtede træk, når der klikkes.

Modifikatorer ændrer trækkoordinaterne, før de anvendes på det trukne element. restrictToVerticalAxis låser bevægelsen til én retning. restrictToParentElement holder det trukne element inden for sin container. snapCenterToCursor fastgør elementet, så dets centrum følger markøren. Du sammensætter flere modifikatorer i en liste.

Hvert element, der kan trækkes eller modtage et slip, skal have et unikt id som tekst eller tal. Disse id'er er den primære måde, dnd-kit sporer, hvad der trækkes, og hvor det slippes. I onDragEnd læser du event.active.id for det trukne element og event.over?.id for slipmålet for at opdatere tilstanden i dit program.

I modsætning til mange træk-og-slip-biblioteker, der behandler tastaturunderstøttelse som en eftertanke, sætter dnd-kit tilgængelighed i centrum for sit design. KeyboardSensor er en førsteklasses del med de samme muligheder som PointerSensor. Alle ARIA-attributter håndteres automatisk, og brugerdefinerede annonceringer kan konfigureres via egenskaben accessibility på DndContext.

dnd-kit erstattede det arkiverede react-beautiful-dnd som fællesskabets standard for træk og slip i React. Arkitekturen centrerer sig om DndContext til tilstand, sensorer til abstraktion af indtastning (Pointer, Keyboard, Touch) og modifikatorer til begrænsning af bevægelse. Tilgængelighed har førsteprioritet: ARIA-attributter, annonceringer via liveområder og fuld tastaturnavigation er indbygget.