jquery-ui 可排序 |如何让它在 iPad/触摸设备上工作？答案

【问题标题】：jquery-ui sortable | How to get it work on iPad/touchdevices?jquery-ui 可排序 |如何让它在 iPad/触摸设备上工作？
【发布时间】：2011-06-06 05:01:57
【问题描述】：

如何让 jQuery-UI 可排序功能在 iPad 和其他触控设备上运行？

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

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

有什么想法吗？

【问题讨论】：

是否有错误报告？
这样的东西有用吗？ github.com/mattbryson/TouchSwipe-Jquery-Plugin
我切换到sortablejs.github.io/Sortable

标签： ipad jquery-ui scroll touch jquery-ui-sortable

【解决方案1】：

找到了解决方案（目前只在 iPad 上测试过！）！

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

【讨论】：

这也适用于 Android 平板电脑。在 Android 3.1 上的三星 Galaxy tab 10.1 上进行了专门测试。
适用于搭载 Android 2.3.4 的三星 Galaxy S2
适用于搭载 Android 4.1.2 的三星 Galaxy S2
这很好用！虽然我有一个覆盖整个页面的表格，所以在不移动元素的情况下很难上下滚动。有没有人解决这个问题？添加一些东西来防止元素移动，直到它们触摸特定的元素 X 秒应该可以解决问题吗？
自 2014 年 1 月起，它不适用于 Windows Phone 的 Internet Explorer。希望当其他浏览器可用时，这会起作用。

【解决方案2】：

让sortable 在移动设备上工作。我像这样使用touch-punch：

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

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

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

【讨论】：

这对我没有用，但对我来说没有投票权。

【解决方案3】：

@eventhorizon 提供的解决方案 100% 有效。但是，当您在手机上启用它时，在大多数情况下您会遇到滚动问题，而在我的情况下，我的手风琴由于不可点击而停止工作。解决它的一种解决方法是通过一个图标使拖动初始化，例如，然后使其可排序使用它来初始化拖动，如下所示：

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

你传递你想要的类名作为初始化器。

【讨论】：

【解决方案4】：

汤姆，我在 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);
    }
};

【讨论】：

【解决方案5】：

最高投票答案的链接现已断开。

要让 jQuery UI Sortable 在移动设备上运行：

将this JavaScript file 添加到您的项目中。
在您的页面上引用该 JS 文件。

更多信息，check out this link。

【讨论】：