Menu
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.
898
jQuery UI wasn't originally written to handle mobile devices. It won't even play nicely with jQuery Mobile. some parts of it may still work well in mobile devices, but anything that has anything to do with dragging will fail.
You have one of these problems: Your jQuery or jQuery UI Javascript path files are wrong. Your jQuery UI does not include draggable. Your jQuery or jQuery UI Javascript files are corrupted.
Draggable() Method This method allows the elements to be dragged with the help of mouse. Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port.
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.
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
