# ui/dnd

> Drag & drop blocks with Pointer Events — no HTML5 drag-and-drop, so it works with touch and the drop target is exact.

Drag & drop blocks (F-41) with Pointer Events — no HTML5 drag-and-drop, so it works with touch and the drop target is exact. A handle follows the hovered block; a transform-positioned line shows where it will land; release dispatches one transaction. Grabbing a selected block moves the whole selection; the page scrolls near its edges; Esc cancels; a click on the handle selects. ⌘⇧↑ / ⌘⇧↓ move blocks by keyboard, dragging across text or ⇧-clicking selects whole blocks, and every reorder animates (FLIP).

```js
import dnd from 'verbal-editor/ui/dnd';
```

| JS gzip | CSS gzip |
| --- | --- |
| 1.84 KB | 0.47 KB |

See it live on [Writing](#/examples/welcome) — every example page on the landing is editable.

## Contract

|  |  |
| --- | --- |
| Name | `dnd` |
| Shortcuts | `⌘⇧↑` `⌘⇧↓` |

## Acceptance

| Feature | Acceptance | Budget |
| --- | --- | --- |
| F-41 · Drag & drop blocks | Drop indicator tracks position; drop is one undoable `moveBlock`; works on touch | ≤ 2.0KB |