web-dev-qa-db-ja.com

jquery-uiソート可能| iPad /タッチデバイスで動作させる方法は？

IPadやその他のタッチデバイスでjQuery-UIのソート可能な機能を使用するにはどうすればよいですか？

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

touchmoveおよびscrollイベントでevent.preventDefault();、_event.cancelBubble=true;_、およびevent.stopPropagation();を使用しようとしましたが、結果はページはもうスクロールしません。

何か案は？

ipadjquery-uiscrolltouchjquery-ui-sortable
108
eventhorizon

ソリューションが見つかりました（今までiPadでのみテストされていました！）！

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

213
eventhorizon

sortableをモバイルで動作させるには。 touch-punch を次のように使用しています：

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

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

ソート可能なインスタンスを作成した後、disableSelection();を追加することに注意してください。

2
vpibano

トム、次のコードを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);
    }
};
0
Karan Dubal