Benutzerdefinierte Drag-Overlays und DnD mit mehreren Containern

DragOverlay rendert seinen Inhalt als React-Portal und hängt ihn direkt an document.body an, statt ihn innerhalb des DOM-Baums von DndContext zu rendern. Dadurch wird es niemals von Containern mit overflow:hidden oder overflow:scroll abgeschnitten und erscheint immer über allen anderen Elementen, ohne dass Sie z-index manuell verwalten müssen.

Da DragOverlay vom ursprünglichen Element getrennt ist, kann es visuelle Stile erhalten, die das Layout des ursprünglichen Elements beeinträchtigen würden. Sie können einen Schlagschatten, eine Skalierungstransformation (sodass es etwas größer als das Original ist) oder einen Rotationseffekt hinzufügen. Diese visuellen Hinweise vermitteln der Benutzerin bzw. dem Benutzer, dass das Element „angehoben“ wurde und in Bewegung ist.

DragOverlay muss wissen, was gerendert werden soll. Verfolgen Sie die aktive Drag-ID im Zustand: Setzen Sie sie in onDragStart mithilfe von event.active.id und löschen Sie sie in onDragEnd mit null. Verwenden Sie diese ID innerhalb von DragOverlay, um die zugehörigen Elementdaten zu finden und die richtige Vorschaukomponente zu rendern.

Bei der Verwendung von DragOverlay sollte das ursprüngliche ziehbare Element während des Ziehens zu einem visuellen Platzhalter werden. Wenn Sie useSortable verwenden, setzen Sie opacity: 0 oder verwenden Sie einen gestrichelten Rahmen, wenn isDragging true ist. So werden der „Platz“ angezeigt, an den das Element bei einem Abbruch des Ziehens zurückkehrt, und die Lücke, die es beim Verschieben an eine neue Position hinterlässt.

Drag-and-drop über mehrere Container bedeutet, dass Elemente zwischen zwei oder mehr getrennten Listen verschoben werden können. Die Einrichtung erfordert einen einzelnen DndContext, der alle Container umschließt, wobei jeder Container seinen eigenen SortableContext besitzt. Alle Element-IDs in allen Containern müssen global eindeutig sein, um Kollisionen zu verhindern.

Für eine flüssige Animation zwischen Containern aktualisieren Sie den Zustand in onDragOver, statt auf onDragEnd zu warten. Wenn das gezogene Element in einen neuen Container wechselt, verschieben Sie es sofort aus dem Quellcontainer in den Zielcontainer. Dadurch erhält die Benutzerin bzw. der Benutzer in Echtzeit eine visuelle Rückmeldung darüber, wo das Element abgelegt wird.

Beim Ziehen über mehrere SortableContext-Instanzen hinweg müssen alle Element-IDs im gesamten DndContext eindeutig sein – nicht nur innerhalb der jeweiligen Liste. Wenn zwei Container dieselbe ID verwenden, kann dnd-kit nicht bestimmen, welches Element aktiv ist. Verwenden Sie UUIDs oder stellen Sie den IDs den Containernamen voran, um globale Eindeutigkeit sicherzustellen.

useDraggable und useSortable akzeptieren eine data-Option: useSortable({ id, data: { containerId, type } }). Diese Daten sind in Drag-Event-Callbacks als event.active.data.current verfügbar. In Szenarien mit mehreren Containern können Sie die ID des Quellcontainers in data speichern und sie in onDragOver verwenden, um zu ermitteln, woher das Element kommt.

Der Zustand für mehrere Container verwendet typischerweise ein nach Container-ID indiziertes Objekt, das jeweils ein Array von Elementen enthält. Wenn sich das aktive Element in onDragOver in einem anderen Container als dem Ziel unter dem Cursor befindet, entfernen Sie es aus dem Array des Quellcontainers und fügen es an der richtigen Position in das Array des Zielcontainers ein.

Der KeyboardSensor funktioniert auch für DnD über mehrere Container. Benutzerinnen und Benutzer drücken die Pfeiltasten, um sich innerhalb eines Containers zwischen Elementen zu bewegen. Wenn sie den Rand eines Containers erreichen, können sie in angrenzende Container wechseln. Der collisionDetection-Algorithmus von SortableContext bestimmt anhand der Position das nächstgelegene gültige Ablageziel.

DndContext akzeptiert eine collisionDetection-Prop, die festlegt, wie bestimmt wird, über welchem Droppable sich das gezogene Element befindet. Das standardmäßige closestCenter eignet sich gut für die meisten Listen. closestCorners ist besser für Raster geeignet. pointerWithin aktiviert ein Droppable nur, wenn sich der Cursor tatsächlich innerhalb davon befindet.

Wo rendert DragOverlay seinen Inhalt im DOM?

DragOverlay wird als Portal in document.body gerendert und ist dadurch visuell unabhängig von Layoutbeschränkungen. Verfolgen Sie activeDragId in onDragStart/onDragEnd, um den richtigen Overlay-Inhalt zu rendern. DnD über mehrere Container verwendet mehrere SortableContext-Instanzen innerhalb eines DndContext mit global eindeutigen IDs. Aktualisieren Sie den Zustand in onDragOver für flüssige Animationen zwischen Containern und verwenden Sie event.active.data.current für Metadaten zum Quellcontainer.