DndContext, useDraggable und useDroppable

Jedes Drag-and-drop-Feature in dnd-kit muss in eine DndContext-Komponente eingeschlossen werden. DndContext ist die zentrale Koordinationsstelle: Es verfolgt aktive Drag-Vorgänge, vermittelt zwischen ziehbaren und ablegbaren Elementen und löst Ereignis-Callbacks aus. Üblicherweise platzieren Sie es auf der Ebene der Komponente, die den Drag-Status verwaltet.

Der useDraggable({ id })-Hook macht eine Komponente ziehbar. Er gibt vier zentrale Werte zurück: attributes (ARIA-Props, die auf das Element angewendet werden), listeners (Event-Handler zum Starten des Drag-Vorgangs), setNodeRef (verbindet die Referenz mit dem ziehbaren Element) und transform (die aktuelle Verschiebung als {x, y, scaleX, scaleY}).

Um ein ziehbares Element einzurichten, wenden Sie attributes und listeners auf das Element an und übergeben setNodeRef als ref-Prop. Die Attribute enthalten role="button", tabIndex und ARIA-Eigenschaften. Die Listener verbinden Pointer- und Tastatur-Event-Handler, die dnd-kit zur Erkennung des Drag-Starts benötigt.

Der Wert transform von useDraggable ist null, wenn kein Drag-Vorgang läuft, und während des Ziehens ein Koordinatenobjekt. Sie wandeln ihn mit CSS.Translate.toString(transform) aus dem Paket @dnd-kit/utilities in einen CSS-String um. Wenden Sie diesen als CSS-Eigenschaft transform auf das ziehbare Element an, damit es dem Cursor visuell folgt.

Der useDroppable({ id })-Hook kennzeichnet einen Container als gültiges Ablageziel. Er gibt isOver (einen booleschen Wert, der während des Überfahrens eines ziehbaren Elements true ist) und setNodeRef zurück, um die Referenz mit dem ablegbaren Element zu verbinden. Anders als bei useDraggable müssen keine Event-Listener angewendet werden.

Mit dem Wert isOver von useDroppable können Sie während eines Drag-Vorgangs visuelles Feedback geben. Wenn isOver true ist, können Sie die Ablagezone mit einer Hervorhebungsfarbe, einem Rahmen oder einer geänderten Hintergrundfarbe darstellen. Dies hilft Benutzern zu verstehen, wo sie das Element ablegen können, und ist entscheidend für Benutzerfreundlichkeit und Barrierefreiheit.

Der onDragEnd-Callback von DndContext erhält ein Ereignisobjekt mit zwei wichtigen Eigenschaften: event.active enthält das gezogene Element einschließlich seiner id, und event.over enthält das Ablageziel (oder null, wenn das Element außerhalb eines ablegbaren Bereichs abgelegt wurde). Mit diesen IDs aktualisieren Sie den Status Ihrer Anwendung.

In onDragEnd aktualisieren Sie nach der Prüfung, dass event.over nicht null ist, Ihren Zustand, um die Verschiebung abzubilden. Wenn Sie beispielsweise eine Karte zwischen Spalten eines Kanban-Boards verschieben, entfernen Sie die Karte aus der Quellspalte und fügen sie der durch event.over.id identifizierten Zielspalte hinzu.

DragOverlay rendert eine schwebende Vorschau des gezogenen Elements, die dem Cursor folgt. Es wird als Portal gerendert (außerhalb des normalen DOM-Baums), sodass es niemals von Containern mit overflow:hidden abgeschnitten wird. Im Gegensatz zum ursprünglichen Element kann das Overlay Schlagschatten, Skalierungstransformationen oder eine Drehung verwenden, um anzuzeigen, dass es gezogen wird.

Damit in DragOverlay der richtige Inhalt gerendert wird, verfolgen Sie mithilfe des Callbacks onDragStart, welches Element gerade gezogen wird. Speichern Sie die aktive ID im Zustand: setActiveDragId(event.active.id). Setzen Sie sie in onDragEnd auf null zurück. Verwenden Sie innerhalb von DragOverlay activeDragId, um das richtige Element nachzuschlagen und zu rendern.

Eine echte Drag-and-drop-Oberfläche kombiniert DndContext, mehrere useDraggable-Elemente, mehrere useDroppable-Zonen und eine Zustandsverwaltung, um zu verfolgen, wo sich welches Element befindet. Die zentrale Erkenntnis ist: dnd-kit stellt die Mechanik bereit – Sie müssen den Zustand in onDragEnd aktualisieren und die Oberfläche neu rendern, damit sie die neue Anordnung widerspiegelt.

Welche Hilfsfunktion konvertiert das transform-Objekt aus useDraggable in eine CSS-Transform-Zeichenkette?

DndContext ist die zentrale Koordinationsstelle für alle Drag-Operationen von dnd-kit. useDraggable stellt attributes, listeners, setNodeRef und transform für ziehbare Elemente bereit. useDroppable stellt isOver und setNodeRef für Ablageziele bereit. onDragEnd liefert Ihnen event.active.id und event.over?.id, damit Sie den Zustand aktualisieren können. DragOverlay rendert eine schwebende Vorschau auf Portal-Basis.