Blog

Creating mobile web and native apps with drag and drop features using HTML5 and CSS3

January 3rd, 2013

We at RIA Mobile Solutions are hard core fans of HTML5 and CSS3 and we are always testing it limits. The other day we are having fun developing a toddler game for showcasing the strengths of HTML5 and CSS3.  We used HTML5 drag and drop for dragging blocks in the game. It is pretty to use HTML5 Drag n Drop feature. But since our goal is to not only to make this game work on desktop browsers but also on mobile browsers, we quickly tested it and to our dismay found out that HTML5 Drag n Drop is not yet touch optimized.

But  we quickly found a solution. Since we are already using jQuery, we found this awesome  touch library  http://touchpunch.furf.com/  for jquery. Pretty light weight and api is straight forward to use too. So let’s look at the code to make your elements Draggable and Droppable.

 

1. First download the library and include it in your page

<script src=”js/libs/jquery.ui.touch-punch.min.js”></script>

2. When your document is ready, bind the drag and drop events simply like below

$( ".sample" ).draggable({ revert: true, drag: function() {

data = $( this ).attr('data-value');
} });

In the above snippet, we are binding a div that can be dragged. Also to check what div we are dragging , we can get the element’s id in the drag function or get the elements data-value.

In our game, if the div that we are dragging cannot be dropped because of unmatched values or what not the requirements are, we want this div to go back to its original place. So setting revert: true will help us in achieving just that.

$('.finder').droppable({

drop: function( event, ui ) {
handleDrop(event);
}
});

In the above snippet, we are binding a div where we can drop the elements that can be dragged.  handleDrop is our custom function that is just doing other dom manipulations like removing the dragged div from dom when it matches the challenge , playing a sound using HTML5 audio tag, playing a nice css3 animation to show the result visually  and what not.

We have tested the above library on Android and IOS  devices and it works like a charm. As you saw, it was that easy too and you can have all type of fun and rich UI interactions.

We are sure that HTML5 will sure catch up but until then if you want to develop a solution where you need Drag and Drop  that works on mobile web, you need to use  libraries like the one we have mentioned here.

Also be sure to check http://touchpunch.furf.com/ for other working samples  and events that you might need. It is a very well documented and we thank them for sharing this awesome jquery plugin.

Quick Tip: 

If you are developing a solution using HTML5 and CSS3, be sure to go check  http://caniuse.com for a certain feature that you are working. This will save some time. For example if I want to check if  Drag and Drop is supported on Mobile Web Browsers, I can do that by following the link here http://caniuse.com/#feat=dragndrop. As you can see none of the major mobile browsers are not yet supporting this awesome feature yet. So it will save you some time and you can come up with an alternative solution.

Also we are going to wrap this simple game that we are developing using HTML5 and CSS3 into native IOS and Android apps using Cordova. More about that later .

Have fun Dragging n Dropping!!