Implementing Drag and Drop Functions with HTML5 and JavaScript
With HTML5 and JavaScript, you can implement native drag and
drop functions within the Web browser.
This is one of the emerging HTML5 tools that promises to make websites
more interactive without relying on additional technologies such as
Flash. In this tutorial we will create a simple page with images the
user can drag and drop into designated areas.
Create an HTML5 Web Page
Create an HTML file for your drag and drop function. Use the
following basic outline, with sections for JavaScript and CSS in the
head area:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/*styling here*/
</style>
<script type="text/javascript">
//functions here
</script>
</head>
<body>
<!--page elements-->
</body>
</html>Add Drag Targets to the Page
Your page will contain elements that can be dragged and elements
in which the dragged items can be dropped. Start with the areas your
user will be able to drop draggable elements into, adding the
following in your page body section:
<div class="pics">
<div id="place1" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place2" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place3" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place4" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place5" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
</div>The draggable images in the page will be able to drop within
these elements. Each has an ID to identify it within the JavaScript
code. The “ondrop” event specifies a function that will execute when
an item is dropped over one of these elements. The “ondragover” event
simply instructs the browser not to do what it does by default, which
is to prevent items being dropped within other elements — we are
telling the browser to allow elements to be dropped by preventing this
default behavior.
Add Draggable Elements to the Page
Let’s use a couple of image elements to drag within the page.
Use the following markup for each one, altering the image source
attributes for your own images:
<img src="pic1.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic1" />Alter the width and height to suit your own images and give each
one a unique ID attribute value. The draggable attribute instructs the
browser to allow users to drag the image element. The “ondragstart”
event attribute specifies a JavaScript function to execute when
dragging commences. Add a couple of these inside two of your
placeholder elements, resulting in markup like this:
<div class="pics">
<div id="place1" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img src="pic1.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic1" />
</div>
<div id="place2" ondrop="dropIt(event);" ondragover="event.preventDefault();">
<img src="pic2.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic2" />
</div>
<div id="place3" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place4" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
<div id="place5" ondrop="dropIt(event);" ondragover="event.preventDefault();">
</div>
</div>Alter the image elements to suit the name, location and
dimensions of your own image files as well as your chosen IDs.
Style the Elements
Add the following declarations to the style section in your page
head:
div[id^="place"]
{float:left; width:80px; height:80px; margin:3px; padding:3px; border:1px dotted #333333; background-color:#ffff99;}These declarations apply to all elements whose ID attributes
begin with “place” as our holder elements do. The shorthand notation
uses a wildcard to specify this, rather than having to specify every
ID attribute for the elements that your items can be dropped within.
Alter the dimensions to suit your images and the styling for
backgrounds or borders in any way you like. To make the demonstration
clearer, you can add the following HTML at the bottom of the page:
<div class="nums">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>Style the new elements by adding the following to your CSS code,
so that you can see at a glance which element you are dragging and
dropping into:
span
{float:left; width:80px; margin:3px; padding:3px; border:1px solid #999999; color:#333333;}
.pics, .nums
{clear:both; text-align:center;}Implement Dragging
Add the following function inside the script section in your
page head:
//function called when drag starts
function dragIt(theEvent) {
//tell the browser what to drag
theEvent.dataTransfer.setData("Text", theEvent.target.id);
}If you look at your image elements you will see that this is the
function specified within the “ondragstart” event attribute. The
content of the function specifies the image element, letting the
browser know that is what to drag. The function receives an event
variable providing access to data about the element being dragged.
Implement Dropping
Add the following function after your dragging function:
//function called when element drops
function dropIt(theEvent) {
//get a reference to the element being dragged
var theData = theEvent.dataTransfer.getData("Text");
//get the element
var theDraggedElement = document.getElementById(theData);
//add it to the drop element
theEvent.target.appendChild(theDraggedElement);
//instruct the browser to allow the drop
theEvent.preventDefault();
}This code first gets a reference to the dragged element, then
adds it to the element it is being dropped in. Again, the code tells
the browser not to implement the default behavior so that the image
can be dropped successfully. This function also receives the event
data indicating information about the dragged element and the element
being dropped over.
Open your page in the browser and test it by clicking and
dragging the images. Notice that if you drag the images over a page
area that you have not explicitly instructed the browser to allow
dropping in, they snap back to their original position. As long as you
drop over a designated element, your images can be moved around.
Notice also that if you drop one image on top of another, the next
time you drag one, they both drag.
Conclusion
HTML5 functions bring a greatly enhanced level of interactivity
to Web development. The future looks pretty exciting, but for the
moment remember to take care of users with browsers that do not
support these emerging techniques.
