Search within TutorialsPark

HTML5 Drag and Drop

Use HTML5 API to drag and drop objects from one place to another.

burger pizza

Drop Zone

Junk Food Time : Drag and Drop you fav unhealthy food in the Drop Zone.

Drag and Drop

1.The Drag and Drop Browser API enables you to Drag an object on the webpage and Drop it at an another destination on the same webpage.

2.This feature was first implemented on Internet Explorer in 1999, but now all browser supports this feature:

3.A Simple Drag and Drop operation can be performed in four simple steps as follows.

❖ Create a draggable element, by setting the draggable attribute to "true"

❖ Handle the dragged object using drag events.

Receive the Dropped item at the Drop Zone.

❖ Complete the Drag-Drop operation by adding the dragged items to destination's DOM.

Creating a Draggable element

1.We first let the browser know which elements can be dragged, by defining the draggable attribute. It can assume three values.

"true": Specifies that elements can be dragged.

"false": Specifies that the element cannot be dragged.

"auto": Leaves it to the browser to decide if the element can be dragged. Its the default value.

2. In most browsers elements <img> , and anchor element <a> with attribute "href" are set as draggable="true" by default.

Syntax : Setting the element to draggable.

Give it a TRY! » Note-The items in the above example can be dragged, but the drop feature is yet to be defined.

Handling the Dragged Element.

1.The dragged elements need to be handled with a series of event handlers, till the entire operation is complete.

2.We set the dragstart event handler on the elements that are supposed to be dragged, which then calls the callback function startDrag and passes to it the dragEvent as an argument .

3.The dragEvent contains a readonly attribute dataTransfer which allows you to access datatransfer interface of the drag-drop API.

4.The Drag-Drop API has many attributes and methods, the one useful in this case is setData(format,Data)

Here, agrument format : Can take two values Text or Url, in this case the value is Text.

Data :Denotes the data to be transfered, in this case its the dragged element's id attribute.

Example: Handling the dragged Element.

Give it a TRY! »

Recieving the drop.

1.Now after dragging the element, we need to find the destination where it can be dropped, dragged items cannot be dropped onto other elements by default.

2.So, for an element to act as a destination for drop, it must cancel the default action and capture the dragOver event .

Example: Recieving the Drop.

Give it a TRY! »

Complete the Drop Operation

1.Next, within the target element include the ondrop attribute with drop event . When you drop the dragged element at the destination then the drop event is fired.

2.This function removes the dragged item from from the source list and adds it to the destination element's DOM. Using the standard appendChild method.

Example: Complete Drag-Drop Operation

Give it a TRY! » Note- The dragOver event is fired repeatedly while the element is being brought over the DropZone.

Related Examples

Related Tags