Direct manipulation
Acting on the visible thing itself, like dragging a card or resizing a box, instead of describing the change through commands.
See it
What it is
Direct manipulation lets people act on the visible object itself: drag a file into a folder, resize a crop box by its handle, or reorder a card by picking it up. Ben Shneiderman named the style in 1982, contrasting continuous, reversible physical actions with command languages that make people describe the result first. The 1984 Macintosh sold the idea to everyone by asking you to drag a file onto a Trash can instead of typing 'del'.
Reach for it when the objects and possible changes can stay visible. Figma's canvas, Google Maps, and Trello boards are natural fits because the action, feedback, and result can happen in the same place. Keep a keyboard path and an explicit command for precision or accessibility; dragging should be a shortcut, not the only door.
The gotcha is invisible physics. If an object looks movable but has no handle, valid drop targets appear late, or a failed drop snaps back without explanation, the interaction turns into guesswork. Show what can move, reveal every valid destination during the gesture, preview the landing position, and make the result undoable.
Ask AI for it
Turn this reorder flow into direct manipulation with the Pointer Events API. Put a visible drag handle on each item, call setPointerCapture() on pointerdown, move the item with CSS transform during the gesture, and show a live insertion marker at the computed drop position. Support the same reorder operation with Space, ArrowUp, ArrowDown, and Enter, expose position changes through an aria-live='polite' region, and provide an Undo action after drop. Never make dragging the only way to reorder.