Drag and drop is a graphical interface technique in which you select an object, hold the mouse button or finger down, move it to another location and release it. Depending on the context, the action moves, copies, links or opens the item.
Why it matters
It maps an easy physical gesture onto abstract actions: moving files between folders, reordering tasks on a board, attaching a file to an email or adding a cover image. It is intuitive but not accessible by itself, since it demands precise pointer control. Good interfaces provide a keyboard or button alternative.
Example
Dragging a file between two folders on the same drive normally moves it, while dragging to a different drive copies it. Holding Ctrl forces a copy and Shift forces a move on Windows. On the web, the HTML Drag and Drop API uses events such as dragstart, dragover and drop:
el.addEventListener("drop", e => {
e.preventDefault();
const files = e.dataTransfer.files;
});Common mistakes
- Offering drag and drop as the only way to reorder or upload.
- Forgetting
preventDefault()ondragover, so drops are refused. - Not testing on touchscreens, where long press and scroll gestures conflict.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.