HTML5 Drag and Drop

In HTML5, any element can be dragged and dropped. The browsers that supports HTML5 drag and drop feature are Firefox. IE9, Safari 5, Opera 12 and Chrome.
To make an element draggable:
1.First you need to set the drag attribute as ‘true’ :<img draggable="true">

2.ondragstart and setData() should be used to specify what you want to happen when the element is dragged.
The dataTransfer.setData() method sets the data type and the value of the dragged data:

Ex.
function drag(ev1)
{
ev1.dataTransfer.setData("Text",ev1.target.id);
}
The data type here is "Text" and its value is the id of the draggable element.
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);
}
In this case, the data type is "Text" and the value is the id of the draggable element ("drag1").

3.Use the ondragover event to specify where to Drop the dragged data
Elements cannot be dropped on other elements by default, but if you want to allow this you have to prevent the default handling by calling the event.preventDefault() method for the ondragover event.
Ex
event.preventDefault()

4.Finally you need to do the drop using ondrop
The ondrop attribute should calls a function, drop(event)
Ex.
function drop(ev1)
{
ev1.preventDefault(); \\ prevent the default browser default handling of the data
var data=ev1.dataTransfer.getData("Text"); \\Get the dragged data ev1.target.appendChild(document.getElementById(data)); \\Append dragged elements
}