Drag and Drop in HTML 5

The Drag and Drop API is one of the most important parts of the HTML5 API specifications because more and more sites are using the drag and drop functionality. It talks about dragging an object in the site and dropping it anywhere. It further extends drag and drop for use between browsers and your computer which was impossible earlier (they stated security as the reason).

The DnD API specification of HTML5 is based on Microsoft's drag & drop implementation which came in IE5.0 and later adopted by both IE and Safari. While building HTML5 specifications for drag and drop, this was taken as the base.

Browser Support

The following browsers support the DnD APIs of HTML 5:

• Chrome 4+: After version 4 of Chrome, the DnD APIs are supported. Chrome & Safari are the most updated with the HTML 5 specifications.
  
  In fact Google recently provided a new feature in GMail, that you can drag & drop your attachment to the desktop if you are using Google Chrome.
   
• Safari 4+: After version 4, Safari is also supporting the DnD APIs of HTML 5.
• Firefox 3.5+: Firefox started its support with version 3.5 and above.
• IE 7: Internet Explorer claims to support the API specification partially for IE7 and above. I am not sure what it means :).. In fact this is a strange inconsistency, especially since the spec is supposed to be based on the IE implementation.

If you want to see whether your browser supports the native HTML5 specifications or not, you can put the following check in your code

if (Modernizr.draganddrop)    // support  else          // does not support

Caution: The way browsers have implemented drag and drop is very different from the specifications in the API. So it may be a challenge to provide DnD functionality across browsers seamlessly to the users.

This API work in two steps:

Step 1: First declare an Element to be draggable. This can be done by defining the draggable="true" attribute of that object.
Links & Images are draggable by default.

Step 2: Listen to dragstart event and set the data being dragged in the dragTransfer object of the event. You may call the preventDefault function of the event to stop the drag (in case when say data of the object is being dragged rather than the entire object itself).

For example: If we have declared an article object like below (article object is also introduced in HTML 5, you may think of it as a div tag of previous HTML versions).

<article id="dragMe1" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)"> Drag to Green</article>

The dragStart function will be something like below:

function dragStart(e) {     e.dataTransfer.effectAllowed='move';           e.dataTransfer.setData("Text", e.target.getAttribute('id'));            e.dataTransfer.setDragImage(e.target,0,0);            return true;  }

The setDragImage function sets the image which you will see when your object is being dragged.

Step 3: Define a drop target for the dragged object. The drop target must listen to at least the 3 events:

• Dragenter
• Dragover - must be canceled (return false) before the object is allowed to dropped.
• Drop

The dragEnd event can be used if we want to perform some operation on the original event being dragged, such as removing the original object from the view once the drag is complete.

We can also transfer data between the drag & drop event using the dataTransfer object of event. The data can include text, images and files.

Demo Code:

The following code uses other features (besides DnD) of HTML5 specifications, such as the DOCTYPE does not have a DTD, which we used to give in the prior versions of HTML. Notice also a few other differences in the presentation; I have not used the <div> tags but the HTML5 specific <section> and <article> tags.

Copy and paste the following code and feel free to play with it :)

UTF-8" http-equiv="content-type"/>
<title>Drag-n-Drop demo</title>
<style>
#mainText{color:red}
#section1, #section2, #section3 {float:left; width:165px; height:165px; padding:20px; margin:10px}
#section1 { background-color: #ff0000; }
#section2 { background-color: #00ff00; }
#section3 { background-color: #0000ff; }
#dragMe1, #dragMe2, #dragMe3 { width:100px; height:30px; padding:5px; margin:5px; }
</style>
<script type="text/javascript">
function dragStart(e) {
	e.dataTransfer.effectAllowed='move';
	e.dataTransfer.setData("Text", e.target.getAttribute('id'));
	e.dataTransfer.setDragImage(e.target,0,0);
	return true;
}
function dragEnd(e) {
	e.dataTransfer.clearData("Text");
	return true
}
function dragEnter(e) {
	var idelt = e.dataTransfer.getData("Text");
	return true;
}
function dragOver(e) {
	var articleID = e.dataTransfer.getData("Text");
	var sectionId = e.target.getAttribute('id');
	if( articleID=="dragMe3" || sectionId == "section1" || (sectionId == "section2" && articleID == "dragMe1") ||
		(sectionId == "section3" && articleID == "dragMe2") )
		return false;
	else
		return true;
}
function dragDrop(e) {
	var idelt = e.dataTransfer.getData("Text");
	e.target.appendChild(document.getElementById(idelt));
	e.stopPropagation();
	return false; 
}
</script>
</head>
<body>
<h1>Drag-n-drop Demo</h1>
<article id="mainText"> Select a text from Red section and try dropping it to Green & Blue</article>
<section id="section1" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
	<article id="dragMe1" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">Drag to Green</article>
	<article id="dragMe2" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">Drag to Blue</article>
	<article id="dragMe3" draggable="true" ondragstart="return dragStart(event)" ondragend="return dragEnd(event)">Drag to Any</article>
</section>
<section id="section2" dropZone="f:image/png" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></section>
<section id="section3" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></section>