jQuery UI Draggable not working on ios devices

Question

I am using .draggable (part of jQuery UI) to allow users to move items around as part of a simple web app. It works fine on all the latest desktop browsers for OSX & Windows (except Windows Safari, where it only moves the items vertically for some reason).

The major problem Im having is it that it doesn't work on Safari IOS (which is where the app is originally targeted for).

Is there a compatibility reason this isn't working?

Is there another way that the same effect could be achieved?

The test site I'm running it on is http://www.pudle.co.uk/mov/draggable.html and I've also made a jsfiddle - http://jsfiddle.net/t9Ecz/.

Any helps much appreciated, cheers.

score 61 · Accepted Answer · answered Mar 03 '12 at 16:58

61

Touch-based devices like iPhone lacks all common mouse related events we are used to in desktop browsers. It does include: mousemove, mousedown, mouseup, among others.

So, the short answer is, you will need to use a solution that have in mind "touch events" counterparts for those "mouse events" above: touchstart, touchmove, touchend or touchcancel.

Take a look at this: https://github.com/furf/jquery-ui-touch-punch

You could be interested in jQuery mobile as well.

Hope it´s a start where you can find a proper solution for your requirements.

answered Mar 03 '12 at 16:58

Zheileman

2,509
20
23

@sam What approach did you follow to get it working? I'm struggling with this right now. – Tony Abou-Assaleh Aug 15 '12 at 21:16
1

i think i just attached jq mobile, if you want here are the files i was playing around with https://www.dropbox.com/s/h7lej7ja3e2crbp/movable.zip – sam Aug 17 '12 at 20:07
touch punch did the job for me :) – anber Jul 09 '13 at 05:21
touch punch works great! It saved me from having to write any additional code. – Jamie May 29 '14 at 14:05
They do now have drag and drop, as well as hover working now. Wanted to update the thread for newly looking users. – Casey ScriptFu Pharr Aug 26 '19 at 13:22

score 16 · Answer 2 · answered Feb 13 '13 at 16:12

I just solved this problem using https://github.com/furf/jquery-ui-touch-punch it was almost a perfect drop in solution, but I had an issue where while dragging my draggable element around, the screen would keep scrolling unpredictably if the page was larger than the viewport.

I solved this issue by forcing the window.scrollTop & scrollLeft to stay the same while dragging, ie:

    var l_nScrollTop = $(window).scrollTop();
    var l_nScrollLeft = $(window).scrollLeft();
    $('#draggable_image').draggable({
        start: function() {
            l_nScrollTop = $(window).scrollTop();
            l_nScrollLeft = $(window).scrollLeft();
        },
        drag: function() {
            $(window).scrollTop(l_nScrollTop);
            $(window).scrollLeft(l_nScrollLeft);
        }
    });

The plugin works! It will need some modifications most probably, but the basic thing works just fine. — Gogol, Apr 13 '20 at 14:16

jQuery UI Draggable not working on ios devices

2 Answers2

Linked