As we all know currently jQuery UI Library does not support touch event on its visual effects, interaction plugins and widget. The current jQuery UI is designed to listen to the mouse events not touch events and you may need to spend some times to work on the codes, to enable touch events works and suit your needs.
But here is a good news for every web designers and developers, we don’t need to done all these by our own hands anymore. Currently, there is a hack called “jQuery UI Touch Punch” that enables the use of touch events on mobile web project using jQuery UI Library. It’s totally free to use on either commercial or non-commercial project!
Note: This jQuery UI Touch Punch is dual licensed under the MIT or GPL Version 2 licenses and is therefore free to use, modify and/or distribute, but if you include Touch Punch in other software packages or plugins, please include an attribution to the original software and a link to its official website.
Download jQuery UI Touch Punch
Using jQuery UI Touch Punch in Your Project
Enable touch events using jQuery UI Touch Punch is extremely easy. First of all, include jQuery and jQuery UI on your page. Then include the jQuery UI Touch Punch right after jQuery UI.
[html]
<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>
[/html]
Usage of jQuery UI Touch Punch
Just use jQuery UI as expected. Let say, you want to make a div to draggable, then you just write it as stated in jQuery UI documentation:
[javascript]
<script type="text/javascript">
$(function() {
$( "#draggable02" ).draggable();
});
</script>
[/javascript]
Following is just the example for you to check it out. Example included drag, drop, selectable items and sortable items. Please remember to view the demo using touch-based mobile devices such as iPhone, iPad and Android devices.
Offical Website
For more information, please visit Head on to jQuery UI Touch Punch Official Website