ChatGPT解决这个技术问题 Extra ChatGPT

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

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?

Is there a bug report for this?
Could something like this be of use? github.com/mattbryson/TouchSwipe-Jquery-Plugin

B
Brandon C

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

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


This works on Android tablet too. Specifically tested on a Samsung Galaxy tab 10.1 on Android 3.1.
Works on Samsung Galaxy S2 with Android 2.3.4
Works on Samsung Galaxy S2 with Android 4.1.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?
As of 1/2014, it does not work on Windows Phone's Internet Explorer. Hopefully, when other browsers become available this would work.
v
vpibano

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.


This didn't work for me but not down voting.
A
Abdulrazak Zakieh

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.


T
Tunaki

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

C
Cardi DeMonaco Jr

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.


关注公众号,不定期副业成功案例分享
Follow WeChat

Success story sharing

Want to stay one step ahead of the latest teleworks?

Subscribe Now