Dnd

Drag Handle Schema

Defines how a drag interaction is initiated on an element.

Source: packages/spec/src/ui/dnd.zod.ts

TypeScript Usage

import { DndConfig, DragConstraint, DragHandle, DragItem, DropEffect, DropZone } from '@objectstack/spec/ui';
import type { DndConfig, DragConstraint, DragHandle, DragItem, DropEffect, DropZone } from '@objectstack/spec/ui';

// Validate data
const result = DndConfig.parse(data);

DndConfig

Drag and drop interaction configuration

Properties

Property	Type	Required	Description
enabled	`boolean`	✅	Enable drag and drop
dragItem	`Object`	optional	Configuration for draggable item
dropZone	`Object`	optional	Configuration for drop target
sortable	`boolean`	✅	Enable sortable list behavior
autoScroll	`boolean`	✅	Auto-scroll during drag near edges
touchDelay	`number`	✅	Delay in ms before drag starts on touch devices

DragConstraint

Drag movement constraints

Properties

Property	Type	Required	Description
axis	`Enum<'x' \| 'y' \| 'both'>`	✅	Constrain drag axis
bounds	`Enum<'parent' \| 'viewport' \| 'none'>`	✅	Constrain within bounds
grid	`any[]`	optional	Snap to grid [x, y] in pixels

DragHandle

Drag initiation method

Allowed Values

element
handle
grip_icon

DragItem

Draggable item configuration

Properties

Property	Type	Required	Description
type	`string`	✅	Drag item type identifier for matching with drop zones
label	`string \| Object`	optional	Accessible label describing the draggable item
handle	`Enum<'element' \| 'handle' \| 'grip_icon'>`	✅	How to initiate drag
constraint	`Object`	optional	Drag movement constraints
preview	`Enum<'element' \| 'custom' \| 'none'>`	✅	Drag preview type
disabled	`boolean`	✅	Disable dragging
ariaLabel	`string \| Object`	optional	Accessible label for screen readers (WAI-ARIA aria-label)
ariaDescribedBy	`string`	optional	ID of element providing additional description (WAI-ARIA aria-describedby)
role	`string`	optional	WAI-ARIA role attribute (e.g., "dialog", "navigation", "alert")

DropEffect

Drop operation effect

Allowed Values

move
copy
link
none

DropZone

Drop zone configuration

Properties

Property	Type	Required	Description
label	`string \| Object`	optional	Accessible label for the drop zone
accept	`string[]`	✅	Accepted drag item types
maxItems	`number`	optional	Maximum items allowed in drop zone
highlightOnDragOver	`boolean`	✅	Highlight drop zone when dragging over
dropEffect	`Enum<'move' \| 'copy' \| 'link' \| 'none'>`	✅	Visual effect on drop
ariaLabel	`string \| Object`	optional	Accessible label for screen readers (WAI-ARIA aria-label)
ariaDescribedBy	`string`	optional	ID of element providing additional description (WAI-ARIA aria-describedby)
role	`string`	optional	WAI-ARIA role attribute (e.g., "dialog", "navigation", "alert")

On this page