How to get jquery dragging working on mobile devices?

Question

I have an application where I allow users to drag some images around. It uses jquery. I'm trying to get it working on mobile devices (on the iPhone, if I drag the image then it drags the whole page). I want to use jquery mobile. Is this right way to go? If so, is it pretty easy to transition from regular jquery to jquery mobile? And also, if I use jquery mobile, will it still be draggable from a desktop as well?

Thanks!

Answer 1

I found a very simple solution to this problem - jQuery UI Touch Punch.

It works by effectively converting touch events into click events, so your draggable code will work as you'd hoped on mobile/tablet touch screens.

To implement, you just need to download the Touch Punch script and then include it in your HTML after your other jQuery / jQuery UI includes:

<script src="scripts/jquery.ui.touch-punch.min.js"></script>

I have tested on Android and iOS and it worked first time for me with no issues at all.