jquery-ui sortable | How to get it work on iPad/touchdevices?

Question

How do I get the jQuery-UI sortable feature working on iPad and other touch devices?

http://jqueryui.com/demos/sortable/

I tried to using event.preventDefault();, event.cancelBubble=true;, and event.stopPropagation(); with the touchmove and the scroll events, but the result was that the page does not scroll any longer.

Any ideas?

Answer 1

Found a solution (only tested with iPad until now!)!

https://github.com/furf/jquery-ui-touch-punch

Answer 2

To make sortable work on mobile. Im using touch-punch like this:

$("#target").sortable({
  // option: 'value1',
  // otherOption: 'value2',
});

$("#target").disableSelection();

Take note of adding disableSelection(); after creating the sortable instance.

Answer 3

Tom, I have added following code to mouseProto._touchStart event:

var time1Sec;
var ifProceed = false, timerStart = false;
mouseProto._touchStart = function (event) {

    var self = this;

    // Ignore the event if another widget is already being handled
    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
        return;
    }

    if (!timerStart) {
        time1Sec = setTimeout(function () {
            ifProceed = true;
        }, 1000);
        timerStart=true;
    }
    if (ifProceed) {
        // Set the flag to prevent other widgets from inheriting the touch event
        touchHandled = true;

        // Track movement to determine if interaction was a click
        self._touchMoved = false;

        // Simulate the mouseover event
        simulateMouseEvent(event, 'mouseover');

        // Simulate the mousemove event
        simulateMouseEvent(event, 'mousemove');

        // Simulate the mousedown event
        simulateMouseEvent(event, 'mousedown');
        ifProceed = false;
         timerStart=false;
        clearTimeout(time1Sec);
    }
};

Answer 4

The link for the top-voted Answer is now broken.

To get jQuery UI Sortable working on mobile:

1. Add this JavaScript file to your project.
2. Reference that JS file on your page.

For more information, check out this link.