# Drag, drop, and build interactions

> @texuli/drag (in development), Texuli's own drag engine: sortable lists, boards, trees, groups, a free canvas and grid columns, all keyboard-accessible.

Language: en
Canonical: https://texuli.com/drag-page/
Markdown: https://texuli.com/drag-page.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

Capability · cross-cutting engine

@texuli/drag · in development

Lists, boards, trees, canvases and grid columns snap together from the same small pieces: a session, collision strategies, modifiers, a gesture tracker and localized messages. Every move works from the keyboard and is announced. `@texuli/drag` is in development and on npm as `0.18.0`, a pre-1.0 release.

- `session` pick up, move, drop, cancel
- `sortable` lists, groups, trees
- `collision` where a drop lands
- `modifiers` axis, bounds, snap
- `gesture` pointer, threshold, capture
- `auto-scroll` edges on your frame loop
- `spatial` canvas, zoom, guides, marquee
- `graph` ports and edges
- `messages` localized announcements

## One engine, three surfaces

 Workbench options Keyboard instructions Reduced motion Right to left

Press Space or Enter to pick up. Use the arrow keys to move, Space or Enter to drop, Escape to cancel.

### Sortable list

- Write launch notes
- Refresh pricing page
- Check status page
- Send May invoices

### Board

#### To do

- Audit sign-up forms
- Polish dark mode
- CSV export

#### Doing

- Search index

#### Done (max 3)

- Onboarding emails

### Tree

- Guides Install
- Theming

- Reference Tokens

- Changelog

### Announcements

What a screen reader hears, newest first.

Move an item to see its announcements.

## Lists in every axis

Vertical, horizontal and grid lists. In right-to-left text the inline arrows swap; the grid can swap two tiles instead of inserting.

### Vertical

- Introduction
- Setup
- Usage
- FAQ

### Horizontal

Left and Right move; in right-to-left text they swap.

- Stable
- Beta
- Nightly
- Canary

### Grid

 Swap instead of insert

## Groups, clones and locked items

Lists that share a group exchange items. The palette clones and accepts nothing back; the pinned summary is locked and keeps its place; tick several blocks to move them together.

### Block palette

- Heading block
- Text block
- Chart block
- Quote block

### Page

- Pinned summary (locked)
- Text block
- Chart block

## Free placement on a canvas

The spatial piece: pan, zoom around the pointer, snap to a grid or to other cards with guides, and select with a marquee. Cards move from the keyboard too.

 Snap 100%

Drag cards; drag the background to pan, Shift+drag to select. Keyboard: Tab to a card, arrows nudge it (Shift for bigger steps), Space selects. Ctrl or Command with the wheel zooms.

## Grid columns

The data grid reorders headers inside their pin zone and resizes them on the same engine; each column menu offers the same moves without dragging.

Arrow keys move between cells. Enter or Space on a column header sorts it; Shift adds a sort. Alt plus Down Arrow, Shift plus F10 or the Menu key on a header opens its column menu: sort, move, pin, resize or hide the column.

Fictional deals

| Account | Owner | Stage | Amount |
| --- | --- | --- | --- |
| Harbor Notes | Ada Park | Won | 12400 |
| Lumen Labs | Bea Ruiz | Open | 4500 |
| Quill & Co | Ada Park | Open | 900 |
| Orbit Supply | Cy Lee | Lost | 2250 |

4 rows

## File drop: a different interaction kind

Dropping files from your computer is not @texuli/drag: the files come from the operating system, so it lives in @texuli/primitives/file-drop. Nothing is uploaded.

 Choose files

## A capability inside larger systems

`@texuli/drag` is an embeddable interaction engine, not a hosted drag-and-drop product. Canvas and Workflows build on it; Slides can compose reorderable content. Their Each one has a Solution landing with a live demo. The engine returns validated moves as data; your application applies them and owns state, history and permissions.

- **Canvas** Solution landing with a live demo.[Canvas Solution](https://texuli.com/solutions/canvas/)
- **Workflows** Solution landing with a live demo.[Workflows Solution](https://texuli.com/solutions/workflows/)
- **Slides** Solution landing with a live demo.[Slides Solution](https://texuli.com/solutions/slides/)

## The contract every surface keeps

- Keyboard: Space or Enter picks up, arrows move, Space or Enter drops, Escape cancels and restores focus.
- Announcements go to a polite live region from localized message templates; no surface hardcodes English.
- Handles are buttons of at least 24 by 24 pixels with instructions; no aria-grabbed.
- Reduced motion turns move animations off; forced colors keep handles, indicators and focus visible.
- Rects are measured when a drag starts and again only on scroll, so moving never thrashes layout.
- No runtime dependencies, nothing at module load, and nothing rendered as HTML.

## For agents

Sortable lists, boards, trees and free placement on the drag engine, live in the browser. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `catalog.search`: Search the component catalog.

Docs:

- [@texuli/drag README](https://github.com/DailybotHQ/texuli/blob/main/packages/drag/README.md)