draganddrop

Drag and drop is a user interface interaction that allows users to select an object, usually with a pointing device, drag it to a destination, and release it to trigger an action such as moving, copying, or opening the item. The pattern is used across desktop and web applications to facilitate rearranging content, organizing resources, and initiating operations without traditional click-based menus. The interaction relies on a drag source and a drop target.

In web browsers, drag and drop is commonly implemented with the HTML5 Drag and Drop API, using the draggable attribute on the source element and events such as dragstart, dragover, dragenter, and drop. During dragstart, data is prepared via a dataTransfer object, often including text, URLs, or files. The drop target must usually preventDefault in dragover to allow a drop, and the drop event finalizes the action.

The concept arose in graphical user interfaces during the 1980s and 1990s with systems from Xerox PARC, Apple, and Microsoft. It has since become a standard interaction in many desktop environments and in web applications, with various libraries providing higher-level abstractions.

Typical use cases include moving files between folders, reordering lists or thumbnails, dragging items into palettes or canvases in design tools, and dropping content into applications such as email clients or content management systems. Some implementations support copy, move, or link effects and provide feedback during the drag operation.

Accessibility considerations emphasize keyboard alternatives and screen reader compatibility, with ARIA roles or attributes to indicate draggable regions and drop zones. Developers should ensure focus management, visible cues, and predictable behavior across devices and assistive technologies.