Messing around w/ HTML5 - drag-n-drop

In my last html5 blog post we explored using the canvas to recreate a simple version of pong. This time around we'll be using the drag-and-drop features of HTML5 for a simple example. Note I'm pulling in the JQuery UI library to take care of alot of the details and provide a easy-to-use interface to use drag-and-drop.

In this example, we have a list of images which we'd like to pull into a common area. The thing is, the original list should be preserved, once dragged-in, an image should not disappear from its original location.

This is accomplished by using jquery to set the images in the list to being draggable (this registers the necessary event handlers), and to make the common area droppable, eg able to receive draggable objects. JQuery allows us to set the 'helper' attribute, which defines the element being dragged around, to the predefined 'clone' value which makes a copy of the original element. From there we expand the container div to accept only the elements we want to drag in, and override the 'drop' method to set various properties allowing us to position and style the dropped element any way we would like.

All in all the effect is the following:

  • Jquery drap drop example 0
  • Jquery drap drop example 1
  • Jquery drap drop example 2
  • Jquery drap drop example 3
  • Jquery drap drop example 4

And the source producing this:

<div id="jquery_drag_drop_example_container"
     style="width: 300px; height: 300px; background: #C0C0C0; float:left;">
</div>
<div style="background: #FFFF99; float:left; width: 20%; margin-left: 10px;">
<ul style="list-style-type: none; list-style-position: inside;">
  <li><img class="jquery_drag_drop_example_img" src="example_0.png" /></li>
  <li><img class="jquery_drag_drop_example_img" src="example_1.png" /></li>
  <li><img class="jquery_drag_drop_example_img" src="example_2.png" /></li>
  <li><img class="jquery_drag_drop_example_img" src="example_3.png" /></li>
  <li><img class="jquery_drag_drop_example_img" src="example_4.png" /></li>
</ul>
</div>
<div style="clear: both;"></div>
<script type="text/javascript">
$(function(){
  $('.jquery_drag_drop_example_img').draggable({
    helper: 'clone',
  }); 
  $('#jquery_drag_drop_example_container').droppable({
    accept: '.jquery_drag_drop_example_img',
    drop: function(event, ui){
      var newitem = $(ui.draggable).clone();
      $(this).append(newitem);
      $(newitem).addClass("jquery_drag_drop_example_img_clone");
      $(newitem).removeClass("ui-draggable jquery_drag_drop_example_img");
      $(newitem).draggable({containment: 'parent'});
      $(newitem).css('position', 'absolute');
      $(newitem).css('top', ui.position.top ); 
      $(newitem).css('left', ui.position.left);
      //alert(event.dataTransfer.getData('text'));
    }   
  }); 
});
</script>
Thats it until next time. Hope everyone enjoys the holidays!