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

如何让 jQuery-UI 可分类功能在 iPad 和其他触摸设备上运行?

Http://jqueryui.com/demos/sortable/

我尝试将 event.preventDefault();event.cancelBubble=true;event.stopPropagation();touchmovescroll事件一起使用,但结果是页面不再滚动。

有什么想法吗?

74164 次浏览

找到了一个解决方案(直到现在才用 iPad 测试过!)!

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

汤姆, 我在 开始事件中添加了以下代码:

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

使 sortable在移动设备上工作。 我是这样使用 碰拳的:

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


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

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

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

让 jQuery UI Sortable 在手机上工作:

  1. Add 这个 JavaScript 文件 to your project.
  2. 引用页面上的 JS 文件。

了解更多信息,请登录 看看这个链接

@ eventhorizon 提供的解决方案100% 有效。 然而,当你在手机上启用它时,在大多数情况下,你会在滚动时遇到问题,在我的情况下,我的手风琴因为不能点击而停止工作。解决这个问题的方法是使拖动可以通过图标进行初始化,然后使用可排序的图标来初始化拖动,如下所示:

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

传递初始化程序所需的类名。