How to Drag and Drop in HTML5?

Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.

Do you have similar website/ Product?

Show in this page just for only $2 (for a month)

Create an Ad

0/60

0/180

Image

In HTML5, drag and drop is part of the standard: Any element can be draggable.

E.g:

To make an Element Draggable set the draggable attribute to true.

ondragstart and setData()

Specify what should happen when the element is dragged.

ondragstart attribute 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.

function drag(ev)
{
ev.dataTransfer.setData("text", ev.target.id);
}

Where to Drop ondragover?

The ondragover event specifies where the dragged data can be dropped.

This is done by calling the event.preventDefault() method for the ondragover event.

event.preventDefault()

HTML5

Ayesha

Tech writer at newsandstory