Hello, world!

HTML 5 Drag and Drop HTML

HTML5 Drag and Drop describes how to grab an object and drag it to a choice of location. The HTML tutorial provides HTML drag and drop example and also help you to build draggable element.



HTML5 Drag and Drop

Another HTML5 standard is the Drag and drop User Interface concept.
In HTML5 Drag and drop is a very common attribute. It allows you to "grab" an object and drag it to a various location by releasing it to drop the object there.
The drag and drop is part of the HTML5 standard, and every object can be draggable.

Browser Support

Below are the browsers that support Drag and Drop feature. The figures in the table identify the first browser version that completely supports it.
API Drag and Drop
Chrome 4.0
Internet Explorer 9.0
Firefox 3.5
Safari 6.0
Opera 12.0


HTML Drag and Drop Example

This is a HTML5 basic drag and drop example:

HTML code example drag and drop:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:200px;height:50px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
 
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
 
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
 
<p>Drag the ny.pe image inside the rectangle:</p>
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://ny.pe/images1/LoggaNYPE3.png" draggable="true" ondragstart="drag(event)" width="200" height="40">
</body>
</html>

HTML output drag and drop:

Drag the ny.pe image inside the rectangle:




Drag and Drop Events

The following are events which are executed throughout different stages of the drag and drop operation.
dragstart - Executes when the user begins dragging of the object.
dragenter - This will be executed once the mouse is first moved over the target element while a drag is taking place. The event should be specified by a listener whether a drop is permitted over this location. If the listeners execute no operations or there are no listeners, then a drop is not permitted by default.
dragover - This event is executed while the mouse is moved over an element when a drag is taking place. Oftentimes, the operation that takes place during a listener will be the same as the dragenter event.
dragleave - This event is executed once the mouse leaves an element while a drag is taking place. Any highlighting or insertion markers used for drop feedback should delete by the listeners.
drag - Executes each time the mouse is moved as the object is being dragged.
drop - Executed the drop event on the element where the drop was took place at the end of the drag operation. A listener would be in charge for retrieving the data being dragged and including it at the drop location.
dragend - This will be executed once the user drags an object then releases the pressed mouse button.
Note: Remember that only drag events are executed; mouse events like mousemove are not executed through a drag operation.

The DataTransfer Object:

These are the DataTransfer attributes and their details:
1 - dataTransfer.dropEffect [ = value ]
Send back the kind of operation that is presently selected.
This attribute can be set, to modify the chosen operation.
The available values are none, copy, link, and move.
 
2 - dataTransfer.effectAllowed [ = value ]
Sends back the kinds of operations that are to be permitted.
This attribute can be set, to modify the permitted operations.
The available values are none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.
 
3 - dataTransfer.types
Sends back a DOMStringList recording the formats that were set in the dragstart event.
In the same way, if some files are being dragged, then one of the types will be the string "Files".
 
4 - dataTransfer.clearData( [ format ] )
Takes away the information of the specified formats.
Clears all data if the argument is deleted.
 
5 - dataTransfer.setData(format, data)
Inserts the indicated data.
 
6 - data = dataTransfer.getData(format)
Sends back the indicated data. If there is no such data, sends back the empty string.
 
7 - dataTransfer.files
Sends back a FileList of the files being dragged, if any.
 
8 - dataTransfer.setDragImage(element, x, y)
Applies the certain element to update the drag feedback, changing any particular feedback in the previous time.
 
9 - dataTransfer.addElement(element)
Inserts the certain element to the list of elements applied to submit the drag feedback.

Building Draggable Element

Initially, to create a draggable element, you must set the draggable attribute to true:
<img draggable="true">
 
What to Drag - ondragstart and setData()
After that you must indicate an action once the element is dragged.
On our example above, the ondragstart attribute invokes a function, drag(event), that indicates what information to be dragged.
Set the data type and the value of the dragged data by means of dataTransfer.setData() method:
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
In this example, the data type is set to"text" and the id of the draggable element ("drag1") is the value of it.

Where to Drop - ondragover
You can indicate the dragged data where it can be dropped through the ondragover event.
By default, Dropping Data or an element in other elements is not allowed. And to make it possible, the default handling of the element must be avoided.
You can execute this by calling the event.preventDefault() method for the ondragover event:
event.preventDefault()
 
Do the Drop - ondrop
A drop event takes place once the dragged data is dropped.
On our example above, the drop(event) function is used on the ondrop attribute,:
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
 
Code explained:
1. Invoke the preventDefault() to avert the browser default handling of the data
2. The dataTransfer.getData() method allows you to acquire the dragged data. The dataTransfer.getData() method will send back any information that was assigned to similar type in the setData() method.
3. The id of the dragged element ("drag1") is actually the dragged data.
4. Attach the dragged element inside the drop element