Before HTML5, if we wanted to implement drag and drop features in the browser we had to use libraries such as jQuery and MooTools. Now we have HTML5 Drag and Drop, which gives us the ability to drag, drop, and transfer data natively within the browser.
While Drag and Drop is a new API included in HTML5, it was – amazingly – first implemented in IE5, back in 2005 when Ian Hickson worked on the HTML5 API. To create draggable content is easy; you just add draggable=true on to the element you want to make moveable.
The Drag and Drop API adds seven new events HTML elements can listen out for; these can be used to monitor a drag and drop. The events dragstart, drag, dragend, dragenter, dragleave, dragover and drop can be split into elements that can be dragged and elements that can have items dropped into them.
Elements that are dragged can trigger three events:
- dragstart: triggered when dragging a draggable element.
- drag: triggered when the draggable element is moved.
- dragend: triggered when the drag and drop operation ends.
Elements that can receive draggable elements can trigger four events:
- dragenter: triggered when a draggable object is dragged over an element.
- dragleave: triggered when a draggable object is dragged outside of an element.
- dragover: triggered when a draggable object is moved inside an element.
- drop: triggered when a draggable object is dropped.
In this tutorial we are going to create a basic user permissions page with the implementation of the Drag and Drop API for moving the user between permission levels.
01. Creating a draggable element
It’s easy to create a draggable element: you simply add draggable="true" to the element you would like to be able to drag. Here is an example of a user we are going to have on our user permissions page:
<a draggable="true" id="leonardo" class="user">Leonardo</a>
We’ve added draggable="true" to the a tag, which us enables to now drag the link. Following this we need to inform the browser as to when something has been picked up – and to do this we’re going to use the ondragstart event to trigger a JavaScript function.
<a draggable="true" class="user" id="leonardo" ondragstart="dragUser(this, event)">Leonardo</a>
As you can see, we’ve added ondragstart="dragUser(this, event)" to the a tag. This is an event that will be triggered as soon as a user begins to drag the element, so let’s create the dragUser function. This assigns the data to the dataTransfer for the drag that has just been initiated. So if you were to drag Leonardo it would assign the dataTransfer with the data relating to Leonardo.
function dragUser(user, event) {
event.dataTransfer.setData('User', user.id);
}
Now that we have Leonardo set up correctly, let’s sort out the other users.
<a draggable="true" class="user" id="leonardo" ondragstart="dragUser
(this, event)">Leonardo</a>
<a draggable="true" class="user" id="raphael" ondragstart="dragUser
(this, event)">Raphael</a>
<a draggable="true" class="user" id="michelangelo" ondragstart="dragUser
(this,event)">Michelangelo</a>
<a draggable="true" class="user" id="donatello" ondragstart="dragUser
(this, event)">Donatello</a>
<a draggable="true" class="user" id="splinter" ondragstart="dragUser
(this, event)">Splinter</a>
<a draggable="true" class="user" id="shredder" ondragstart="dragUser
(this, event)">Shredder</a>
02. Creating areas to drop to
Now we have a user that we can drag, we need to create an area to drop it to.
<div id="unassigned" ondrop="dropUser(this, event)" ondragenter="return false" ondragover="return false">
Unassigned
</div>
The div has three event handlers: ondrop runs the dropUser function when an element is dropped inside the div; ondragenter and ondragover use false to prevent the browser running default actions. Let’s create the dropUser function.
function dropUser(target, event) {
var user = event.dataTransfer.getData('User');
target.appendChild(document.getElementById(user));
}
We’re creating a variable called user and setting to contain the data set when a drag was initiated and the dragUser function run, then using the appendChild function to add it to the div the dropUser function was triggered from. Now let’s create all of the user permission levels and add the users into the unassigned div.
<section id="user-levels">
<div id="unassigned" ondrop="dropUser(this, event)" ondragenter="return
false" ondragover="return false">
Unassigned
<a draggable="true" class="user" id="leonardo" ondragstart="dragUser
(this, event)">Leonardo</a>
<a draggable="true" class="user" id="raphael" ondragstart="dragUser
(this, event)">Raphael</a>
<a draggable="true" class="user" id="michelangelo" ondragstart="dragUser
(this,event)">Michelangelo</a>
<a draggable="true" class="user" id="donatello" ondragstart="dragUser
(this, event)">Donatello</a>
<a draggable="true" class="user" id="splinter" ondragstart="dragUser
(this, event)">Splinter</a>
<a draggable="true" class="user" id="shredder" ondragstart="dragUser
(this, event)">Shredder</a>
</div>
<div id="contributors" ondrop="dropUser(this, event)" ondragenter="return
false" ondragover="return false">
Contributors
</div>
<div id="editors" ondrop="dropUser(this, event)" ondragenter="return false"
ondragover="return false">
Editors
</div>
<div id="admins" ondrop="dropUser(this, event)" ondragenter="return false"
ondragover="return false">
Admins
</div>
<div class="clear"></div>
</section>
Next we will need some CSS to add some basic styling to our example; cursor: move; in the user class styles the cursor to use the move symbol on hover.
#user-levels {
width: 900px;
margin: 0 auto;
}
#super-admins, #admins, #editors, #contributors, #unassigned {
float: left;
width: 202px;
height: 170px;
padding: 5px 10px;
margin-right: 3px;
background: #eee;
text-align: center;
}
.user {
width: 100px;
padding: 0 5px;
display: block;
margin: 0 auto 3px;
text-align: center;
border: 1px solid #aaa;
background: #ddd;
cursor: move;
}
.clear {
clear: both;
}
We should now have a page enabling us to drag and drop users into permission levels using the HTML5 Drag and Drop API. It’s a simple example, but it demonstrates the potential of what HTML5 Drag and Drop is capable of.
This article first appeared in issue 231 of .net magazine.
Thomas Hardy is a web developer based in Newcastle upon Tyne. He currently works at Union Room. thomashardy.me.uk
Liked this? Read these!
