To do
In review
Canvas selection
“those squares on the corners”
Drag & Drop
/ ondrop · ondragover /
also called drag and drop, drag-and-drop interaction, direct manipulation, sortable drag
Drag and drop lets someone move or place an object directly. A grip says where to grab, a drag preview follows the pointer, and an insertion line or highlighted target previews the destination before release. Selection resize handles are related controls around a selected object: they resize it rather than move it.
Anatomy — every part, named
- 1Drag handle (grip)
draggable="true"“Those kind of a 3x3 or 2x2” dots are a drag handle, also called a grip or grabber.
- 2Selection resize handles
pointer events“Those squares, you know, that are on the corners” are selection resize handles around the selected object.
- 3Drop indicator (insertion line)
ondragover“Line indicators for where it will drop” are drop indicators, often drawn as an insertion line between items.
- 4Drop-target highlight
ondragover“The neighboring terminal is highlighted as a whole” describes a drop-target highlight over the destination region.
- 5Drag preview (ghost)
DataTransfer.setDragImage()The translucent copy that follows the pointer during a drag is the drag preview, often called the ghost.
Prompt — paste into your agent
Build a Drag & Drop interaction with HTML draggable, ondragover, and ondrop (or @dnd-kit/core): show a drag handle, selection resize handles where applicable, a drag preview, and an insertion line or highlighted drop target before release. Do not use the deprecated aria-grabbed state; announce the picked-up item, available destination, and drop result through an ARIA live region.
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | ondrop | |
| HTML | ondragover | |
| HTML | draggable="true" | |
| ARIA | aria-grabbed | deprecated; announce drag state and drop results with live regions instead |
| dnd-kit | @dnd-kit/core |