Introduction

In this tutorial we will learn how to create a HTML5 Drag and Drop function using some of HTML5′s new event attributes. Event attributes allow us to define javascript events and trigger them within an html element, making it easier to call and write a javascript function. A common method used with HTML elements is the oncLick event which calls a function when the element is clicked. In order for us to invoke the Drag and Drop function in our HTML, we will be using these attributes:

Event Attribute
These attributes are new in HTML 5 and state what actions must be performed in order for them to carry out their designated function (or task).

  • ondrop – Script to be run when dragged element is being dropped.
  • ondragover – Script to be run when an element is being dragged over a valid drop target.
  • ondragstart – Script to be run at the start of a drag operation.

Global Attribute
This HTML5 attribute simply states the property or value of the element.

  • draggable – set to true so the DOM knows that the object is a draggable object

When finished, our project should look similar and behave to the image below:

HTML5 Drag and Drop Example

HTML Markup and Styling

Let’s start by marking up the HTML and adding some style with CSS so we can see what we are working on.

We now have two boxes. One containing an image and one without an image. We want to be able to drag that image from one box to the other. The first thing we must do is that we must give the <img> it’s own ID and let the DOM know the image is “draggable” by setting the attribute property draggable=”true”.

You will notice that we set the proper event attributes to their respective elements. Each <div> will call a function that when “dragged over” will allow the object to be dropped and when “dropped” it will copy the object’s data and transfer it to the dropped location (the empty div). As a summary, the html attribute designates the event to trigger the javascript function.

The Javascript

Now let’s create the functions so the ondrop, ondragover and ondragstart attributes have something to call to.

If you are familiar with javascript you will see there is a variable (x). This variable is replaced with the value designated in our HTML attribute (which in this case is event). This may seem overwhelming so let’s go over each function and what action it is performing.

function allowDrop(x)
When the value x is replaced with event, the function is updated to event.preventDefault(). By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element by using event.preventdefault().

function drag(x)
When the value x is replaced with event, the function is updated to event.dataTransfer.setData(“Text”,x.target.id). This simple copies and transfers the Text data along with the id value of our image which is “dragimage”.

function drop(x)
When the value x is replaced with event, the function is updated to
event.preventDefault();
var data=event.dataTransfer.getData(“Text”);
event.target.appendChild(document.getElementById(data));
.
In these three steps, the function prevents the default handling, copies and transfers the data to the target and places it into the dropped area.

Final Markup

With a few HTML 5 attributes and creating three functions we are able to create a simple drag and drop functionality for our website. Here is the full code put together:

Wrapping it Up

HTML attributes are extremely useful for placing additional values and actions inline with your elements. This makes it easier to read and much more functional when organizing your code. This approach is a little more involved since it deals with javascript but understanding the use of each language makes your site more dynamic and better for the user. You can also use Jquery UI to perform Drag and Drop functions as well for quicker (but not as optimized) results. If you would like a full listing of HTML5 Event attributes, visit W3 schools.

Download Source Files