HTML Tutorial
HTML - Introduction HTML - Basic HTML - Structure HTML - Element HTML - Attributes HTML - Headings HTML - Paragraphs HTML - Styles HTML - Formatting HTML - Phrase Tags HTML - Quotations HTML - Comments HTML - Colors HTML - CSS HTML - Links HTML - Images HTML - Tables HTML - List HTML - Inline elements HTML - Block elements HTML - Classes HTML - Id HTML - Javascript HTML - File Path HTML - Iframe HTML - Responsive HTML - Computer Code HTML - Head tag HTML - Events HTML - Url Encoding HTML - Entities HTML - Validation
HTML Forms
HTML - Forms HTML - Form Elements HTML - Input types HTML - Input Attributes
HTML5
HTML5 - Introduction HTML5 - New Elements HTML5 - Semantics HTML5 - Style Guide
HTML Media
HTML - Video HTML - Audio HTML - Embed Multimedia
HTML Graphics
HTML - Canvas HTML - SVG
HTML APIs
HTML - Geolocation HTML - Drag & drop HTML - Web Storage HTML - Web Workers
HTML References
HTML - Tag Reference HTML - Tag by Category HTML - Attributes HTML - Global Attributes HTML - Events HTML - Language Codes HTML - Country Codes HTML - URL Encoding HTTP Methods HTTP Status Codes <input> types

HTML5 Drag & Drop API

Parrot Icon

Drag the Parrot image into the rectangle boxes:

Run code

HTML Drag and Drop interfaces enable applications to use drag and drop features.

This interfaces allows the user to click and hold the mouse down over an element, drag it to another location, and release the mouse to drop the element there.


HTML Drag & Drop Example

The following example shows a simple drag and drop example:

Run code

It may seem complicated, but don't worry the following section provides a summary of the basic steps to add drag and drop functionality to an application. Each section includes a description of the step, a short code example.



Make an Element Draggable

To make an element draggable requires adding the draggable attribute.

Then add the ondragstart event handler, as shown in the following code sample.

In the example above, the ondragstart event handler calls a function, drag(event), that specifies what data to be dragged.

The dataTransfer.setData() method sets the data type and the value of the dragged data.

In our example, the data type is "text" and the value is the id of the draggable element ("drag").


Define a drop zone

By default, the browser prevents anything from happening when dropping something onto the HTML element.

To change that behavior so that an element becomes a drop zone or is droppable, the element must have ondragover event handler attribute.

Note ondragover handler calls preventDefault() to prevent additional event processing (such as touch or pointer events).

When the dragged data is dropped, a drop event occurs.

In our example, the ondrop attribute calls a function, drop(event).

The getData() method to retrieve drag items and process them accordingly.

The dragged data is the id of the dragged element ("drag").


Drag and Drop Events

Below are number of events which are fired during various stages of the drag and drop operation:

Event Description
ondrag The event occurs when an element is being dragged
ondragend The event occurs when the user has finished dragging an element
ondragenter The event occurs when the dragged element enters the drop target
ondragleave The event occurs when the dragged element leaves the drop target
ondragover The event occurs when the dragged element is over the drop target
ondragstart The event occurs when the user starts to drag an element
ondrop The event occurs when the dragged element is dropped on the drop target