Method DndContext

Namespace

Velvet

Assembly

Velvet.Docs.dll

DndContext(Action<DragStartArgs>?, Action<DragOverArgs>?, Action<DragEndArgs>?, Action<DragCancelArgs>?, DndCollisionDetection?, DragActivation?, Action<DragMoveArgs>?, IReadOnlyList<DndSensor>?, IReadOnlyList<DndModifier>?, DndAutoScroll?, DndAccessibility?, string?, string?, string?, FiberElementProps?, StyleOverrides?, Func<VisualElement, Action>?, VNode?[]?, string?, string?, string?, IReadOnlyDictionary<string, string>?, IReadOnlyDictionary<string, string>?, FiberEventBinding[]?)

Drag-and-drop scope, dnd-kit's DndContext: a component that renders a real container element (the element is the stable scope identity and cleanup anchor) and provides the drag state to the Hooks.UseDraggable / UseDroppable / UseDndContext / UseDndMonitor hooks below it. Draggables and droppables pair with their nearest ancestor scope at event time; one drag may be active per mounted tree at a time. Any existing container can be a scope via props (DndContext), which the hooks do not see.

public static ComponentNode DndContext(Action<DragStartArgs>? onDragStart = null, Action<DragOverArgs>? onDragOver = null, Action<DragEndArgs>? onDragEnd = null, Action<DragCancelArgs>? onDragCancel = null, DndCollisionDetection? collisionDetection = null, DragActivation? activation = null, Action<DragMoveArgs>? onDragMove = null, IReadOnlyList<DndSensor>? sensors = null, IReadOnlyList<DndModifier>? modifiers = null, DndAutoScroll? autoScroll = null, DndAccessibility? accessibility = null, string? className = null, string? key = null, string? name = null, FiberElementProps? props = null, StyleOverrides? styles = null, Func<VisualElement, Action>? refCallback = null, VNode?[]? children = null, string? whileHoverClass = null, string? whileTapClass = null, string? whileFocusClass = null, IReadOnlyDictionary<string, string>? data = null, IReadOnlyDictionary<string, string>? aria = null, FiberEventBinding[]? events = null)

Parameters

onDragStart Action<DragStartArgs>

Fired once when a press crosses its activation constraint.

onDragOver Action<DragOverArgs>

Fired when the winning drop target CHANGES (including to null).

onDragEnd Action<DragEndArgs>

Fired on release; state written here flushes synchronously like any discrete input handler. Over is null when dropped on nothing.

onDragCancel Action<DragCancelArgs>

Fired when a drag aborts (Escape, pointer cancel, lost capture, or the source/scope unmounting mid-drag).

collisionDetection DndCollisionDetection

Collision strategy; null means RectIntersection.

activation DragActivation

Scope-wide activation default; a per-draggable override wins.

onDragMove Action<DragMoveArgs>

Fired on every move of an active drag.

sensors IReadOnlyList<DndSensor>

The sensors a press or key on a draggable is offered to; null means Default.

modifiers IReadOnlyList<DndModifier>

Applied in order to every drag's translate.

autoScroll DndAutoScroll

Null means Default.

accessibility DndAccessibility

Null announces Default while a screen reader is enabled.

className string

key string

name string

props FiberElementProps

styles StyleOverrides

refCallback Func<VisualElement, Action>

children VNode[]

whileHoverClass string

whileTapClass string

whileFocusClass string

data IReadOnlyDictionary<string, string>

aria IReadOnlyDictionary<string, string>

events FiberEventBinding[]

Event bindings applied to the element (Documentation~/react-migration.md owns the rule). The array is read and never written.

Returns

ComponentNode

The created ComponentNode.