Capability · cross-cutting engine

@texuli/drag · in development

Drag, drop, and build interactions

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.

  1. sessionpick up, move, drop, cancel
  2. sortablelists, groups, trees
  3. collisionwhere a drop lands
  4. modifiersaxis, bounds, snap
  5. gesturepointer, threshold, capture
  6. auto-scrolledges on your frame loop
  7. spatialcanvas, zoom, guides, marquee
  8. graphports and edges
  9. messageslocalized announcements

One engine, three surfaces

Workbench options

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.

Grid

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.

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
Harbor NotesAda ParkWon12400
Lumen LabsBea RuizOpen4500
Quill & CoAda ParkOpen900
Orbit SupplyCy LeeLost2250

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.

@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.

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.