Pattern: Drag and Drop
Pattern: Drag and Drop
Manage drag, hover, and drop states with explicit state machines.
Overview
Drag and drop interactions involve multiple distinct states: idle, dragging, hover-over-target, dropping, and animation completion.
Key Concepts
States: idle → dragging → droppable → dropped → animating
Events: drag.start, drag.move, drag.enter, drag.leave, drag.drop
Context for positional data
Parallel states for multi-item drag
Related Pages
Drag and Drop → Animations — Drop animation states
Drag and Drop → Undo/Redo — Undoable drag operations
Case Study: Collaborative Editing — Shared drag state
TODO
Add drag reorder machine
Add multi-select drag machine
Add touch event handling
Do you like what you are reading? Subscribe to receive updates.
Unsubscribe anytime
Powered by Seed HypermediaOpen App