Michael Gaigg: Über UI/UX Design

Touch Event Support for jQuery UI

Swipe

Problem: jQuery UI doesn't support touch gestures

We are customizing a map application with swipe functionality which is based on some legacy code mash-up with dojo and jquery/jquery ui. Everything was nice and dandy until we tried swiping on the iPad for the first time. Bad awakening. jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that our mouse event simply don't work on touch devices. One might think the jQuery toolkit would take care of it... but no!

Solution:

Solution A: For every mouse/keyboard event, provide the equivalent touch event: touchstart, touchmove, touchend,...

Solution B: Use a hack called jQuery UI Touch Punch that adds simulated events (that mimic touch events) to your app and respond to the mouse events you already have in your app. It's really simple:

<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>
<script src="jquery.ui.touch-punch.js"></script>

Add the jquery and jquery ui libraries (if you don't have them already or if you use older versions) plus the reference to your local copy of the touch-punch file (download the Development version!!)

Solution C: Go to github and get the really nice swipe story map template which works "out of the box" (but didn't satisfy our complex requirements)