HTML5 Drag and Drop

HTML5 Drag-and-Drop facility brings native support to the browsers. If the draggable attribute is set to true, the user has ability to drag any element. For this we have to set the target drop zone, where the drag element can be dropped. This is basically used to drag images from desktop to the browser where the target drop zone is set.

Prior to this, we have to include some js library to drag and drop element. HTML5 drag and drop features make it much easier for developers. Originally it was created by Microsoft for Internet Explorer, but now it is supported by all major browsers like - Firefox, Safari, Chrome etc.

Drag and Drop events

These are the following drag and drop events.

Event	Description
dragStart	It fires when the user starts dragging the element.
dragEnter	It fires when the mouse first moves over the target element.
dragOver	It fires when the mouse is moved over an element when the drag is occurring.
dragLeave	It fires when the user drags an element out of the drop listener.
drag	It fires when the user drags an element anywhere.
drop	It fires when the user drops an element into a drop listener successfully.
dragEnd	It fires when the drag action is complete.

These are the following drag and drop attributes.

Attributes	Descriptions
dataTransfer.effectAllowed	It returns the types of action permitted. The possible values of this effect are none, copy, copyLink, copyMove, link, linkMove, move, all and uninitialized.
dataTransfer.dropEffect	When the user hovers over the target element. The browser's cursor indicates the type of operation that is going to take place. The possible values of this effect are none, copy, link, move.
dataTransfer.types	This property returns an array of all currently registered formats.
dataTransfer.clearData	This method clear out all registered data.
dataTransfer.setData(format, data)	This function calls during dragStart. It registers the transfer item under a MIME type format.
dataTransfer.getData(format)	This function allows the registered data item for a given type to be retrieved.
e.dataTransfer.setDragImage(imgElement, x, y)	It indicates the browser to use an existing image element as the drag image. It hints the user with the position of the mouse cursor.
dataTransfer.addElement(element)	It sets the drag source to the given element.

Example

<style type="text/css">
#dropbox{
	width: 150px; 
	height: 150px;
	border: 3px dashed #D3D3D3;
	background: #FCFBE3; 
	margin: 5px;
}
#dragimg{ margin: 5px; }
</style>		
<script>
function dragStart(e) {
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
function dragOver(e) {
e.preventDefault();
return false;
}
function drop(e){
e.preventDefault();
// Get the dragged data
var data = e.dataTransfer.getData("Text");
// Append dragged image to the box
e.target.appendChild(document.getElementById(data));
}
</script>
<div id="dropbox" ondragover="dragOver(event);" ondrop="drop(event);">
</div>
<img id="dragimg" src="/images/rabbit.jpg" draggable="true" 
ondragstart="dragStart(event);" />

Output of the above code