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.

Solution 1

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.

Solution 2

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);
        }
    });