Since there has yet to be a jQuery Mobile to be released, we are stuck using what works on our desktop browsers.  Unfortunately, not all these features will transfer to give the user the same experience on the new mediums of phones and tablets.   Simply stated, the jQuery UI library doesn’t support touch events(touchstart/touchmove/touchend) which are used to interact with the widgets. (they currently listen to mouse events(mouseover/mousemove/mouseout)).

So, for Example:  If I hold and slide a slider on an ipad, the value will show zero until I let go.  Ideally, you’d want the values to change just as they would on a computer as you slide.

So while we wait for an official release for mobile devices, I use jQuery UI Touch Punch for these extended phone and iPad capabilities.  This hack has provided an easy fix to get the functionality to work on mobile.

“jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library.”

Implementing this is pretty easy as well.  Full instructions are here.

• Include the latest/desired version of jQuery and jQuery UI
• Include jQuery UI Touch Punch (after jQuery UI and ui.mouse.js)
• Activate it by applying the “draggable” function on the element needing the touch support. (after jQuery UI Touch Punch include)

And then voila, your interface should now be working on mobile devices.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script>$('#widget').draggable();</script>