16

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?

Damovisa
  • 19,213
  • 14
  • 66
  • 88

2 Answers2

24

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.

Jakub Hampl
  • 39,863
  • 10
  • 77
  • 106
1

This is a demo of jquery ui 1.9pre: https://dl.dropbox.com/u/3872624/lab/touch/index.html

The jquery.mouse.ui.js file is working great for me.

pizza247
  • 3,869
  • 7
  • 33
  • 47
  • Using 1.9 with jquery.mouse.ui.js is the ticket, so thanks! Using 1.8 seems to work at first, but sortable and draggable have little quirks that make it unusable. – phatmann Oct 02 '11 at 21:42
  • Unfortunately this does not work correctly if you try to use the "handle" option in Sortable. After dragging an item, any further attempts to drag other items just end up dragging the first item. I am looking into the issue. This was also mentioned [here](http://stackoverflow.com/questions/6745098/jquery-ui-sortable-doesnt-work-on-touch-devices-based-on-android-or-ios/6795028#6795028). – phatmann Oct 07 '11 at 18:06