Today I stumbled upon a jQuery-UI plugin that adds support for touch events to all your jQuery-UI widgets – out of the box! It’s so easy to install that it will give you the this-is-a-miracle feeling when you test it on a touch screen.

It’s called jQuery-UI Touch Punch and was developed by David Furfero.

It is worth explaining how it works. Unlike other plugins that help you simulate touch events with your mouse, this one does the opposite: it turns your touch events into mouse events. And that’s what allows your widgets to work without additional code: as far as they’re concerned, you’re using a mouse and not your thumb.

So here is the little miracle worker on Github: https://github.com/furf/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js

Don’t forget to thank @Dave Furf!

UPDATE: the plugin now has its own webpage, visit it at http://touchpunch.furf.com/

5 Comments Adding Touch Support to jQuery-UI Interfaces

  1. ssantosh21

    Hi, This is really a great tool.
    Recently I used it in my application. My application also contain another jquery widget:
    jquery.ui.swappable.js

    Touch punch gets fail over there with this device.
    I am not able to drop my element on the target.

    Reply
    1. gabrielsomoza

      Hi, thanks for getting in touch. Unfortunately I cannot offer support for this tool because I didn’t build it, you’ll have better luck if you get in touch with the author (mentioned in the article). Sorry!

      Reply

Leave a Reply