Take the 2-minute tour ×

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.

share|improve this question
add comment

2 Answers

up vote 21 down vote accepted

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.

share|improve this answer
got it working, Thanks ! –  sam Mar 3 '12 at 17:33
@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
i think i just attached jq mobile, if you want here are the files i was playing around with dropbox.com/s/h7lej7ja3e2crbp/movable.zip –  sam Aug 17 '12 at 20:07
touch punch did the job for me :) –  anber Jul 9 '13 at 5:21
add comment

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();
        start: function() {
            l_nScrollTop = $(window).scrollTop();
            l_nScrollLeft = $(window).scrollLeft();
        drag: function() {
share|improve this answer
add comment

Your Answer


