---
title: Dnd
description: Dnd protocol schemas
---

{/* ⚠️  AUTO-GENERATED — DO NOT EDIT. Run build-docs.ts to regenerate. Hand-written docs go in content/docs/guides/. */}

Drag Handle Schema

Defines how a drag interaction is initiated on an element.

<Callout type="info">
**Source:** `packages/spec/src/ui/dnd.zod.ts`
</Callout>

## TypeScript Usage

```typescript
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` | 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` | 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` | 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` | 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") |


---

