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.
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.
document.write("Drag and drop supported");
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.
<img draggable="true" src="leopard_frog.gif" />
<img draggable="true" src="snow_gnat.gif" />
<img draggable="true" src="brown_spider.gif" />
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.
<img id="frog" draggable="true" src="leopard_frog.gif" ondragstart="drag(this, event)" />
<div id="target1" ondrop="drop(this, event)" ondragover="return false"></div>
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.