Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Easy HTML5 Drag and Drop

By Stephen Bucaro

One of the things added to the HTML specification to create version 5 is drag-and-drop. Of course, drag-and-drop has been around long before HTML5, but you had to use browser sensing and perform the drag-and-drop differently for different browsers. Now, as long as the browser supports HTML5, you can use the same code for different browsers. Unfortunately HTML5 drag-and-drop only works in newer browsers such as Firefox 3.6 or Internet Explorer 9, so until everybody upgrades their browser, you still need to use browser sensing.

There is another option for detecting a browser's support for HTML5 features. You download a javascript file called modernizr from www.modernizr.com and include it in your document. Then you use methods contained in the file to detect the HTML5 feature you want to use. An example of the code required is shown below.

<script src="modernizr.min.js"></script>

if(Modernizr.draganddrop)
{
   document.write("Drag and drop supported");
}
else
{
   document.write("Drag and drop not supported");
}

In this example I show you how to use HTML5 drag-and-drop to make a nice little application that could be used to teach children which classification different animals belong in. It displays three pictures of animals; a gnat, a spider, and a frog, and three boxes labeled insect, Arachnid, and Amphibian. The child drags the animal to a box. Only the box with the correct classification name for that animal will let the child drop the picture.

This example will include only the minimal code for the application to work, and this code will work only in Web browsers that support HTML5 drag-and-drop, such as Firefox 3.6 or Internet Explorer 9. The only extra code in the example is the code to create an HTML table. This code is used for the layout of the application. Many Web designers poopoo the use of tables for page layout, using HTML spans and divs instead. I say HTML tables are still the best method for page layout, but if you want to deal with the HTML box model, good luck using spans and divs instead.

Actually making an HTML element draggable is incredibly easy. You just add the draggable attribute as shown below.

<!DOCTYPE HTML>
<html>

<img draggable="true" src="leopard_frog.gif" />

<img draggable="true" src="snow_gnat.gif" />

<img draggable="true" src="brown_spider.gif" />

</body>
</html>

The code above displays three images, each with their draggable attribute set to "true", and you can drag each of them with your mouse pointer. Unfortunately, the code above doesn't provide a place to drop the images. Add the code below to the body section of your webpage to create the table, which holds the image in its first cell, and a div drop target in its second cell.

<table><tr><td>
   <img id="frog" draggable="true" src="leopard_frog.gif" ondragstart="drag(this, event)" />
</td><td>
   <div id="target1" ondrop="drop(this, event)" ondragover="return false"></div>
</td></tr></table>

Note that the image uses the ondragstart event to execute a function named drag, and the div uses two events, ondrop to execute a function named drop, and ondragover which just returns false. The default action of the ondragover event is to prevent dragging over the drop target, so it needs to return false to enable dragging. Shown below is the code for the drag and drop functions, which you need to add to the head section of your web page.