6

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!

Ringo Blancke
  • 2,444
  • 6
  • 30
  • 54

1 Answers1

13

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.

ban-geoengineering
  • 18,324
  • 27
  • 171
  • 253
  • It's not working for me with Chrome on Android mobile. any possible solution ? – Madan Bhandari Nov 30 '15 at 13:27
  • Sorry, @NeosFox, only just seen your comment. Did you manage to solve it? – ban-geoengineering Oct 31 '17 at 13:38
  • 1
    Oops !!! the comment was about 2 years ago, I can't recall that problem, may be I solved that :D will update here, if I got any recall. – Madan Bhandari Oct 31 '17 at 16:27
  • 1
    Not the best solution: if the element to drag takes the whole viewport, using jQuery UI Touch Punch prevents the document to be scrolled. Can be even a problem with element you want to be only draggable horizontally with a container hiding overflow, as a draggable carousel. In this case, the carousel prevents user to scroll the document up and down. I prefer jQuery Touch (github.com/ajlkn/jquery.touch) which makes draggable possibly touch only on mobile (mouse gesture can be filtered) and does not prevent touch events to propagate (thus, document to be scrolled). – MaxAuray Nov 14 '18 at 10:29
  • 1
    @ban-geoengineering The link leads to a 404? – topsoftwarepro Dec 29 '21 at 08:44
  • Bit late, but here you go: https://github.com/furf/jquery-ui-touch-punch/find/master – ban-geoengineering Apr 02 '22 at 17:01