« Walking for Project Bread | Main | Issue with web fonts and media declarations in Firefox »

Great script for enabling touch events

If you've ever used the jQuery UI library's draggable() function to make a site that had a really cool interface, you've probably marvelled at how well it worked at making thing draggable with your mouse... until you tried it on your touch-enabled mobile phone or tablet. On those devices, no matter where you touched or slid your finger, your previously lively website lay there, unresponsive, like a dead fish. Tap. Nothing.

The bad news is that despite all of your hard work, your site won't work on a touchscreen because draggable() doesn't respond to touch events.

Now the good news is that there's an easy fix. After a little searching, I found Touch Punch. The author describes the script as so: "jQuery.ui.touch-punch.js is a small hack that maps touch events to their mouse event analogs." Perfect.

You can view working examples on the author's site or download Touch Punch from Github.

Post a comment