如何在iPad和其他触摸设备上使用jQuery-UI可排序功能?
http://jqueryui.com/demos/sortable/
我尝试使用event.preventDefault();
,event.cancelBubble=true;
和event.stopPropagation();
与touchmove
和scroll
事件,但结果是页面不再滚动。
有任何想法吗?
找到了解决方案(直到现在才用iPad测试过!)!
http://touchpunch.furf.com/content.php?/sortable/default-functionality
使sortable
在移动设备上工作。我正在使用这样的touch-punch:
$("#target").sortable({
// option: 'value1',
// otherOption: 'value2',
});
$("#target").disableSelection();
记下在创建可排序实例后添加disableSelection();
。
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);
}
};