Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I get jQuery UI's Draggable and Sortable functions to work on the iPhone?

I have a page that uses JQuery UI; in particular the Sortable interaction.

The page works fine for desktop web browsers with mice, however I can't get the drag-drop functionality to work on Mobile Safari on the iPhone. Any dragging action simply scrolls the page.

The functionality on my page is extremely similar to the Sortable Empty-Lists demo on the JQuery UI site. This page also doesn't work on the iPhone.

Is there any way to get the drag-drop functions working on the iPhone?

like image 200
Damovisa Avatar asked May 20 '10 01:05

Damovisa


People also ask

Why is draggable not working?

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.

What is jQuery draggable?

jQueryUI provides draggable() method to make any DOM element draggable. Once the element is draggable, you can move that element by clicking on it with the mouse and dragging it anywhere within the viewport.

How does jQuery sortable work?

jQueryUI provides sortable() method to reorder elements in list or grid using the mouse. This method performs sortability action based upon an operation string passed as the first parameter.


1 Answers

According to the Mobile Safari docs drag and drop is not supported, but it can be simulated. Since basically dragging your finger along will scroll the browser you will have to disable this. That can be done like this:

$(document).bind('touchmove', function(e) {
   e.preventDefault();
}, false);

Otherwise the event you will have to handle are touchstart, touchmove and touchend.

like image 182
Jakub Hampl Avatar answered Sep 21 '22 08:09

Jakub Hampl