Drag and Drop

A headless drag-and-drop component for building sortable lists and cross-container movement. Manages the full drag lifecycle — pointer tracking, collision detection, keyboard navigation, auto-scrolling, and accessibility announcements — while leaving all rendering to you.

Integrate via the Submodels pattern: embed the DragAndDrop.Model in your Model, forward its Messages and Subscriptions, and use view helpers like draggable(), droppable(), and ghost() to attach behavior to your elements. The component emits Reordered and Cancelled OutMessages so your update function decides what happens on drop.

For a full example with localStorage persistence, add-card forms, and screen reader announcements, see the Kanban example.