jQuery UI is without a doubt one of the first libraries that every developer think and rely on to implement easily user interaction features like dynamic resizing of elements, draggable elements, sortables and droppables.
However although there are more advantages than disadvantages, one of the most known weakness of the framework is that it doesn't offer support for mobile touch devices. For someone that expects such behaviour as default because jQuery is widely known, he probably will be disappointed after implementing jQuery UI on the entire project and after discovering that his application doesn't work well in mobile devices. Fortunately, there are persons that thought about this problem and decided to work on a solution. We are talking about the jQuery UI Touch Punch project, it works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.
In this article, we'll show you how to add touch support for multiple jQuery UI components easily by only adding an extra library.
1. Include jQuery UI Touch Punch
To add touch support, you will only need a copy of the jQuery UI Touch Punch distributable. You can get a copy of the script downloading the development or minified version from the repository at Github. Then include it after the source of jQuery UI and that's it:
<!-- 1. jQuery UI -->
<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>
<!-- 2. Include touch punch -->
<script src="jquery.ui.touch-punch.min.js"></script>After including the file, the touch support will be automatically added to jQuery UI. For more information about this library please visit the official repository at Github or the official website here. The library 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 the Touch Punch website.
2. Using the plugin
As mentioned, only including the plugin will make your usual jQuery UI code work in touch devices. Between the supported touch capabilities you may find resizable, droppable, sliders, accordions, selectables etc.
Happy coding !
