jquery-ui可排序| 如何在iPad /触摸设备上使用它?


116

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

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

我试图使用event.preventDefault();event.cancelBubble=true;以及event.stopPropagation();touchmovescroll事件,但结果却是,网页不会滚动下去。

有任何想法吗?


是否有此错误报告?
马克-安德烈·Lafortune

Answers:


216

找到了解决方案(直到现在才可以在iPad上测试!)!

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


9
这也适用于Android平板电脑。在Android 3.1的Samsung Galaxy Tab 10.1上进行了专门测试。
2012年

3
可以在带有Android 2.3.4的三星Galaxy S2上使用
MrUpsidown,2012年

1
可以在带有Android 4.1.2的三星Galaxy S2上使用
Wessel Kranenborg

2
这很棒!尽管我有一张桌子覆盖着整个页面,所以不移动元素就很难上下滚动。有人解决过这个问题吗?添加一些东西来防止元素移动直到它们触摸了特定的X秒钟才可以解决问题?
汤姆(Tom)

2
从1/2014开始,它不适用于Windows Phone的Internet Explorer。希望当其他浏览器可用时,它将可以使用。
edcincy 2014年

7

为了使sortable移动工作。我使用像这样的触摸打孔

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

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

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


0

汤姆,我向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);
    }
};
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.