## HTML5 Drag and Drop
* * *
Drag and drop is part of the HTML5 standard.
* * *
!(
Drag the **** icon into the rectangle.
* * *
## Drag and Drop
Dragging and dropping is a common feature, which means grabbing an object and dragging it to another location.
In HTML5, drag and drop is part of the standard, and any element can be dragged.
* * *
## Browser Support
[Try it »](
It may look complicated at first glance, but we can study different parts of the drag and drop events separately.
* * *
## Setting an Element as Draggable
First, to make an element draggable, set the draggable attribute to true:
![]()
* * *
## What to Drag - ondragstart and setData()
Then, specify what happens when the element is dragged.
In the above example, the ondragstart attribute calls a function, drag(event), which specifies the data being dragged.
The dataTransfer.setData() method sets the data type and value of the dragged data:
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
Text is a DOMString representing the type of drag data to add to the drag object. The value is the ID of the draggable element ("drag1").
* * *
## Where to Drop - ondragover
The ondragover event specifies where the dragged data can be dropped.
By default, elements cannot be dropped into other elements. To allow a drop, we must prevent the default handling of the element.
This is done by calling event.preventDefault() on the ondragover event:
_event_.preventDefault()
* * *
## Performing the Drop - ondrop
When the dragged data is dropped, the drop event occurs.
In the above example, the ondrop attribute calls a function, drop(event):
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Explanation of the code:
* Calling preventDefault() to avoid the browser's default handling of the data (the default behavior of the drop event is to open it as a link)
* Using dataTransfer.getData("Text") to retrieve the dragged data. This method returns any data set with the same type in the setData() method.
* The dragged data is the ID of the dragged element ("drag1")
* Appending the dragged element to the target element
* * *
YouTip