Drag-and-drop with drop target
Picking an item up with the pointer while the interface shows exactly where it can land: a highlighted zone, an opening gap, a line.
See it
What it is
Three pieces make the pattern work. The drag source signals it can be picked up (grab cursor, a dotted handle, a lift shadow on press). The drag preview follows the pointer so the item feels held. The drop target reacts on hover: a ring around the valid column, an insertion line between two rows, or a placeholder gap that opens where the item will land. That last piece is the part people forget, and without it dragging is guessing.
Reach for it when position itself carries meaning: kanban columns, playlist and priority ordering, form builders, file upload zones, canvas editors. If order is arbitrary, a Move to menu is faster and cheaper than a drag system.
Two gotchas. The native HTML5 drag-and-drop API is a swamp: no touch support, drag images you can barely style, and event ordering nobody remembers, which is why most teams use pointer-event libraries (dnd-kit, SortableJS, react-dnd). And WCAG 2.2 'Dragging Movements' requires a non-drag path to the same result, so ship keyboard lifting (space to pick up, arrows to move, space to drop) or a plain 'Move to' menu alongside it.
Ask AI for it
Build a sortable kanban board with dnd-kit. On press, lift the card with a 4 degree tilt and an elevated shadow, set the cursor to grabbing, and render a semi-transparent drag overlay that follows the pointer. While dragging, open a dashed placeholder gap at the exact insertion point and outline the hovered column with a 2px accent ring; show a not-allowed cursor and a red tint over columns that reject the card. On drop, settle the card into place with a 200ms spring and persist the new order optimistically, reverting with a toast if the save fails. Add a keyboard path: Space lifts, arrow keys move between positions and columns, Space drops, Escape cancels, with each step announced through an aria-live region.