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?

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?

Could something like this be of use? https://github.com/mattbryson/TouchSwipe-Jquery-Plugin — jinglesthula, Aug 16 '16 at 14:20

score 218 · Answer 1 · edited Mar 04 '21 at 16:08

218

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

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

edited Mar 04 '21 at 16:08

Brandon C

63
5

answered Jan 10 '11 at 15:56

eventhorizon

3,459
3
14
9

This is beautiful! It remaps touch events to mouse events. I love it! Thank you. – Kon Jun 21 '11 at 17:30
9

This works on Android tablet too. Specifically tested on a Samsung Galaxy tab 10.1 on Android 3.1. – absynce Jan 10 '12 at 20:50
Thanks guys , I was searching for this for a while. – Adi Omari Feb 13 '12 at 20:15
What a simple, elegant, perfect solution. Developing fun online tools for the ipad just got so much easier. – Phil Jul 13 '12 at 16:16
3

Works on Samsung Galaxy S2 with Android 2.3.4 – MrUpsidown Aug 03 '12 at 18:35
1

Works on Samsung Galaxy S2 with Android 4.1.2 – Wessel Kranenborg Apr 04 '13 at 06:58
1

iPhone 4/iOS 7.0.2 - Works like a charm! – Oswaldo Acauan Oct 08 '13 at 16:54
2

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? – Tom Oct 31 '13 at 23:18
2

As of 1/2014, it does not work on Windows Phone's Internet Explorer. Hopefully, when other browsers become available this would work. – edcincy Jan 24 '14 at 18:38
1

Works on Moto G 4.4, Galaxy S4, 4.1.2, And Ideapad Tab with honeycomb. – Danny22 Jul 10 '14 at 19:09
1

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. http://jsfiddle.net/30m4wfdr/ – Craig Jacobs Nov 21 '14 at 15:18
@MaxWilliams who cares ;P (joking - although every joke has it's truths) – James Cazzetta Jul 03 '15 at 12:33
You have to respect an elegant solution, works like a charm! – teutara Oct 07 '16 at 07:51
Working as of feb/2017, iPad pro. – BernieSF Feb 23 '17 at 17:01
I had to include the touch-punch file BEFORE including the nestedSortable.js file for this to work. – John Langford Jun 14 '17 at 21:39
awesome, working on all mobile devices I've tested it on (Huawei P9, S7, S8) – Daniel Resch Dec 15 '18 at 18:34
1

The URL above is broken. Anyone got a new one? – Johncl Jan 15 '21 at 13:25
The URL above is broken, but you can access the code in their git (https://github.com/furf/jquery-ui-touch-punch) – Federico G Feb 24 '21 at 00:26

score 7 · Answer 2 · answered Feb 26 '19 at 13:40

7

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.

answered Feb 26 '19 at 13:40

mochi

1,549
11
23

This didn't work for me but not down voting. – David J Jan 03 '21 at 19:32

score 0 · Answer 3 · edited Mar 19 '16 at 12:48

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

score -1 · Answer 4 · answered Oct 15 '20 at 16:34

-1

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

To get jQuery UI Sortable working on mobile:

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

For more information, check out this link.

answered Oct 15 '20 at 16:34

Cardi DeMonaco Jr

271
6
10

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

4 Answers4

Linked