JoomlaVision > Web design > Create drag and drop features in HMTL5

Create drag and drop features in HMTL5

Thomas Hardy demonstrates HTML5’s nifty Drag and Drop API, which facilitates dragging and dropping elements natively within the browser

create-drag-and-drop-features-hmtl5

This article first appeared in issue 231 of .net magazine – the world’s best-selling magazine for web designers and developers.

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.

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:

  1. <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.

  1. <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.

  1. function dragUser(user, event) {
  2.   event.dataTransfer.setData(‘User’, user.id);
  3. }

Now that we have Leonardo set up correctly, let’s sort out the other users.

  1. <a draggable=”true” class=”user” id=”leonardo” ondragstart=”dragUser
  2. (this, event)”>Leonardo</a>
  3. <a draggable=”true” class=”user” id=”raphael” ondragstart=”dragUser
  4. (this, event)”>Raphael</a>
  5. <a draggable=”true” class=”user” id=”michelangelo” ondragstart=”dragUser
  6. (this,event)”>Michelangelo</a>
  7. <a draggable=”true” class=”user” id=”donatello” ondragstart=”dragUser
  8. (this, event)”>Donatello</a>
  9. <a draggable=”true” class=”user” id=”splinter” ondragstart=”dragUser
  10. (this, event)”>Splinter</a>
  11. <a draggable=”true” class=”user” id=”shredder” ondragstart=”dragUser
  12. (this, event)”>Shredder</a>

Creating areas to drop to

Now we have a user that we can drag, we need to create an area to drop it to.

  1. <div id=”unassigned” ondrop=”dropUser(this, event)” ondragenter=”return false”ondragover=”return false”>
  2. Unassigned
  3. </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.

  1. function dropUser(target, event) {
  2.   var user = event.dataTransfer.getData(‘User’);
  3.   target.appendChild(document.getElementById(user));
  4. }

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.

  1. <section id=”user-levels”>
  2. <div id=”unassigned” ondrop=”dropUser(this, event)” ondragenter=”return
  3. false” ondragover=”return false”>
  4. Unassigned
  5. <a draggable=”true” class=”user” id=”leonardo” ondragstart=”dragUser
  6. (this, event)”>Leonardo</a>
  7. <a draggable=”true” class=”user” id=”raphael” ondragstart=”dragUser
  8. (this, event)”>Raphael</a>
  9. <a draggable=”true” class=”user” id=”michelangelo” ondragstart=”dragUser
  10. (this,event)”>Michelangelo</a>
  11. <a draggable=”true” class=”user” id=”donatello” ondragstart=”dragUser
  12. (this, event)”>Donatello</a>
  13. <a draggable=”true” class=”user” id=”splinter” ondragstart=”dragUser
  14. (this, event)”>Splinter</a>
  15. <a draggable=”true” class=”user” id=”shredder” ondragstart=”dragUser
  16. (this, event)”>Shredder</a>
  17. </div>
  18. <div id=”contributors” ondrop=”dropUser(this, event)” ondragenter=”return
  19. false” ondragover=”return false”>
  20. Contributors
  21. </div>
  22. <div id=”editors” ondrop=”dropUser(this, event)” ondragenter=”return false”
  23. ondragover=”return false”>
  24. Editors
  25. </div>
  26. <div id=”admins” ondrop=”dropUser(this, event)” ondragenter=”return false”
  27. ondragover=”return false”>
  28. Admins
  29. </div>
  30. <div class=”clear”></div>
  31. </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.

  1. #user-levels {
  2.   width: 900px;
  3.   margin: 0 auto;
  4. }
  5. #super-admins, #admins, #editors, #contributors, #unassigned {
  6.   float: left;
  7.   width: 202px;
  8.   height: 170px;
  9.   padding: 5px 10px;
  10.   margin-right: 3px;
  11.   background: #eee;
  12.   text-align: center;
  13. }
  14. .user {
  15.   width: 100px;
  16.   padding: 0 5px;
  17.   display: block;
  18.   margin: 0 auto 3px;
  19.   text-align: center;
  20.   border: 1px solid #aaa;
  21.   background: #ddd;
  22.   cursor: move;
  23. }
  24. .clear {
  25.   clear: both;
  26. }

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.

Related posts