Question

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

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

有什么想法吗？

Answer 1

找到解决方案（直到现在才用iPad测试！）！

http://touchpunch.furf.com/content.php?/sortable/default-functionality

Answer 2

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

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

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

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

Answer 3

汤姆，我已将以下代码添加到 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);
    }
};

Answer 4

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

要在移动设备上使用jQuery UI Sortable：

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

有关更多信息，请check out this link。

jquery-ui可排序|如何让它在iPad / touchdevices上运行？

4 个答案: