jQuery UI Touch Punch

Touch Event Support for jQuery UI

Tested on iPad, iPhone, Android and other touch-enabled mobile devices.

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

Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser will fail on most, if not all, touch-enabled mobile devices, becuase jQuery UI listens to mouse events—mouseover, mousemove and mouseout—not touch events—touchstart, touchmove and touchend.

That's where jQuery UI Touch Punch comes in. Touch Punch 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.

As I said, Touch Punch is a hack. It duck punches some of jQuery UI's core functionality to handle the mapping of touch events. Touch Punch works with all basic implementations of jQuery UI's interactions and widgets. However, you may find more complex cases where Touch Punch fails. If so, scroll down to learn how you can file and/or fix issues.

This code 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 this Touch Punch website.

Download the Code

The jQuery UI Touch Punch plugin is available in two versions:

* minified & gzip'd

Please do not link directly to these files. Download them and include them from your server. Let us not have a repeat of this incident.

Like the Code? Make a Donation!

If you feel that jQuery UI Touch Punch has made your life (and the lives of your users) a little easier, please consider making a donation.

Your contributions allow me to spend time maintaining the code, writing documentation, creating examples and helping Touch Punch users debug their applications.

Using Touch Punch is as easy as 1, 2…

Just follow these simple steps to enable touch events in your jQuery UI app:

  1. Include jQuery and jQuery UI on your page.

    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
    
  2. Include Touch Punch after jQuery UI and before its first use.

    Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

    <script src="jquery.ui.touch-punch.min.js"></script>
    
  3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

    <script>$('#widget').draggable();</script>
    

Try Some Examples

“The Story of jQuery UI Touch Punch”
jQuery Conference, Portland 2013

The story of jQuery UI Touch Punch is the story of a piece of code that was almost never written yet now runs on over 60 million websites. It's a story about helping others, sharing your work and following your creative impulses without regard for the consequences. And the *bleep*ing consequences.

Interactive presentation is available at talks.furf.com.

Deal with Issues

Here are some ways you can contribute to the development and maintenance of jQuery UI Touch Punch:

  1. If you experience errors using jQuery UI Touch Punch, log them on GitHub. Please provide specific details and, if possible, include a link to the broken implementation.

    Before submitting an issue, please check to see that a similar issue has not been previously submitted. View open issues.

    Log an issue

  2. Even better, you can help by fixing errors and then submitting pull requests.

    When submitting a pull request, please provide links to examples of the broken and fixed functionality.

    View open issues

Leave a Comment

Let me know what you think!


About the Author

jQuery UI Touch Punch is maintained by furf, aka David Furfero: UI engineer at Time, Inc., MLB, Meebo, furf, improv comedian and all-around lovable asshole.

If you have any questions about Touch Punch or other things JavaScript, feel free to find me @furf on Twitter.

For other interesting JavaScript projects, check out my GitHub repos.

Fork me on GitHub