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?

Rotation

Is there a bug report for this? – Scarfskin

Could something like this be of use? github.com/mattbryson/TouchSwipe-Jquery-Plugin – Beautiful

I switched to sortablejs.github.io/Sortable – Ankylostomiasis

Answer 1

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

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

Rotation

This works on Android tablet too. Specifically tested on a Samsung Galaxy tab 10.1 on Android 3.1. – Erythro

What a simple, elegant, perfect solution. Developing fun online tools for the ipad just got so much easier. – Yemen

Works on Samsung Galaxy S2 with Android 2.3.4 – Manta

Works on Samsung Galaxy S2 with Android 4.1.2 – Mohair

iPhone 4/iOS 7.0.2 - Works like a charm! – Determinative

This works great! Although i've got a table covering an entire page so it becomes difficult to scroll up and down without moving elements. Has anyone addressed this issue? Adding something to prevent elements from moving until they've touched that specific one for X seconds should do the trick? – Gillmore

As of 1/2014, it does not work on Windows Phone's Internet Explorer. Hopefully, when other browsers become available this would work. – Harrie

Works on Moto G 4.4, Galaxy S4, 4.1.2, And Ideapad Tab with honeycomb. – Soupandfish

I've been trying to get this working for a warehouse project we're working on. Thought I'd post the fiddle I've been working on that works with touch (using the furf.com function) and serialization of the data. jsfiddle.net/30m4wfdr – Mithridate

@MaxWilliams who cares ;P (joking - although every joke has it's truths) – Velarde

Working as of feb/2017, iPad pro. – Stupe

I had to include the touch-punch file BEFORE including the nestedSortable.js file for this to work. – Cortege

awesome, working on all mobile devices I've tested it on (Huawei P9, S7, S8) – Thremmatology

The URL above is broken. Anyone got a new one? – Yelenayelich

The URL above is broken, but you can access the code in their git (github.com/furf/jquery-ui-touch-punch) – Mace

this doesn't seem to work any more, its a very old answer – Hideandseek

works perfectly well for me. Thank you very much. Just to mention that I use /1.11.1/jquery.min.js and /1.10.4/jquery-ui.min.js and 1.4.1/jquery.mobile.min.js and finally 0.2.3/jquery.ui.touch-punch.min.js – Rocco

Working like a charm on iPad 15.4.1 ( iPad Pro 12.9 inch, 2nd gen). Really easy to use (like said: "Using Touch Punch is as easy as 1, 2…"). Just included.. thats it :) Thank you so much. Saved a lot hours . Tested and working on : – Acadia

Works for Telegram Web app bot on Android – Vast

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.

Ectropion

This didn't work for me but not down voting. – Tedmund

Worked for me: I only added the library Punch after jQuery UI: jquery.ui.touch-punch.min.js (jQuery UI Touch Punch 0.2.3). Download: github.com/furf/jquery-ui-touch-punch – Profusive

Answer 3

The solution provided by @eventhorizon works 100%. However, when you enable it on phones, you will get problems in scrolling in most cases, and in my case, my accordion stopped working since it went non-clickable. A workaround to solve it is to make the dragging initializable by an icon, for example, then make sortable use it to initialize the dragging like this:

$("#sortableDivId").sortable({
        handle: ".ui-icon"
});

where you pass the class name of what you'd like as an initializer.

Starlastarlene

Answer 4

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);
    }
};

Ziguard

Answer 5

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.

Treadwell