如何让 jQuery-UI 可排序功能在 iPad 和其他触控设备上运行?
http://jqueryui.com/demos/sortable/
我尝试将 event.preventDefault();
、event.cancelBubble=true;
和 event.stopPropagation();
与 touchmove
和 scroll
事件一起使用,但结果是页面不再滚动。
有任何想法吗?
找到了一个解决方案(直到现在只用 iPad 测试过!)!
https://github.com/furf/jquery-ui-touch-punch
使 sortable
在移动设备上工作。我像这样使用 touch-punch:
$("#target").sortable({
// option: 'value1',
// otherOption: 'value2',
});
$("#target").disableSelection();
请注意在创建可排序实例后添加 disableSelection();
。
@eventhorizon 提供的解决方案 100% 有效。但是,当您在手机上启用它时,在大多数情况下您会遇到滚动问题,而在我的情况下,我的手风琴由于不可点击而停止工作。解决它的一种解决方法是使拖动可通过图标初始化,例如,然后使其可排序使用它来初始化拖动,如下所示:
$("#sortableDivId").sortable({
handle: ".ui-icon"
});
您在其中传递您想要作为初始化程序的类名。
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);
}
};
票数最高的答案的链接现已断开。
要让 jQuery UI Sortable 在移动设备上工作:
将此 JavaScript 文件添加到您的项目中。在您的页面上引用该 JS 文件。
如需更多信息,check out this link。
不定期副业成功案例分享