html5

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:

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!

Like it or not HTML5 is coming (or is here depending on who you ask). After playing around with it a bit, I've found more of the same, if you're familiar w/ the underlying concepts in different contexts, it should be really easy to pick up.

Regardless, I've installed the Drupal HTML5 Tools plugin to be able to use HTML5 themes in my blog's CMS, and decided to mess around w/ a few underlying concepts to see the nuances of how they work. The first of these is the canvas, which can be used to easily draw in-browser graphics.

For example checkout this simple version of pong that I just quickly whipped up. (edge cases not included :-p)

See the code after the jump