Home » Tutorials » JavaScript » How To Add Touch Event To Your JQuery UI?

How To Add Touch Event To Your JQuery UI?

How To Add Touch Event To Your JQuery UI?

  • Stumble it!
  • Share

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.

<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>

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:

<script type="text/javascript">
$(function() {
	$( "#draggable02" ).draggable();
});
</script>

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.

draggable

Offical Website

For more information, please visit Head on to jQuery UI Touch Punch Official Website


  • Enhancing Google Map Interactivity with jQuery
  • How To Create jQuery Password Strength Indicator in 10 Minutes!
  • Make A jQuery Sticky Header In 5 Minutes

  • Ahaliav

    i tested it and it works great! thanks!

    • http://www.onlywebpro.com onlyWebPro

      Hi Ahaliav,

      You are welcome! Please do follow us for more upcoming HTML5 tutorials. :)

  • qamb

    not working in my case :( dont know why :S

    • http://www.onlywebpro.com onlyWebPro

      Oh! What browser are you using to view the content?

  • esquire

    works but very crappy response…certainly not useful for mature projects..

    • admin

      You can try to use JQuery Mobile Library instead of this :)

    • http://www.onlywebpro.com onlyWebPro

      You may try to use JQuery Mobile Library instead of this :)

Android, iOS Development Tutorials