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.

Answer 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.