jQuery UI可排序 | 如何在iPad /触摸设备上使其工作？

Question

如何在iPad和其他触屏设备上使用jQuery-UI sortable功能？

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

我尝试使用event.preventDefault();、event.cancelBubble=true;和event.stopPropagation();与touchmove和scroll事件，但结果是页面不再滚动。

有什么想法吗？

- eventhorizon

---

这个问题有错误报告吗？ - Marc-André Lafortune

这样的东西有用吗？https://github.com/mattbryson/TouchSwipe-Jquery-Plugin - jinglesthula

我转换到 https://sortablejs.github.io/Sortable/。 - Saeed Arianmanesh

Answer 1

发现了一个解决方案（目前仅在iPad上进行了测试）！ https://github.com/furf/jquery-ui-touch-punch

- eventhorizon

---

这也适用于安卓平板电脑。在三星Galaxy Tab 10.1上的Android 3.1上进行了特别测试。 - absynce

兼容三星Galaxy S2手机，支持Android 2.3.4系统。 - MrUpsidown

iPhone 4/iOS 7.0.2 - 运行得非常好！ - Oswaldo Acauan

这很好用！尽管我有一个表格覆盖了整个页面，所以在不移动元素的情况下上下滚动变得困难。有人解决过这个问题吗？添加一些东西，在它们接触到特定元素X秒之前防止元素移动应该就可以解决了吧？ - Tom

截至2014年1月，它在Windows Phone的Internet Explorer上无法运行。希望当其他浏览器可用时，它可以正常工作。 - edcincy

Answer 2

要在移动设备上实现 sortable，我使用了 touch-punch，用法如下：

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

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

请注意在创建可排序实例后添加 disableSelection();。

- vpibano

---

这对我没有用，但我不会点踩。 - David J

对我有用：我只是在jQuery UI之后添加了Punch库： jquery.ui.touch-punch.min.js（jQuery UI Touch Punch 0.2.3）。下载链接：https://github.com/furf/jquery-ui-touch-punch - Thomas

Answer 3

@eventhorizon提供的解决方案百分之百有效。然而，在手机上启用它时，大多数情况下会出现滚动问题，在我的情况下，我的手风琴停止工作，因为它变成了不可点击的状态。解决此问题的方法是通过一个图标使拖动初始化，然后使用sortable将其用于初始化拖动，如下所示：

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

在这里，您需要传递您想要作为初始化器的类名。

- Abdul Razak Zakieh

Answer 4

Tom，我已经在 mouseProto._touchStart 事件中添加了以下代码：

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

- Karan Dubal

Answer 5

目前，最受欢迎的答案链接已经失效。

要在移动设备上使用jQuery UI Sortable，请执行以下操作：

1. 将此JavaScript文件添加到您的项目中。
2. 在页面上引用该JS文件。

有关更多信息，请查看此链接。

- Cardi DeMonaco Jr