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

116

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

私が使用してしようとしたevent.preventDefault();、event.cancelBubble=true;とevent.stopPropagation();してtouchmoveとscrollイベントが、結果は、ページがもはやスクロールしないということでした。

何か案は？

— eventhorizon
ソース

これに関するバグレポートはありますか？

— マルク=アンドレ・Lafortune

このようなものが役に立ちますか？github.com/mattbryson/TouchSwipe-Jquery-Plugin

— jinglesthula

回答:

216

解決策を見つけました（今のところiPadでのみテストされています！）！

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

— eventhorizon
ソース

これはAndroidタブレットでも機能します。具体的には、Android 3.1のSamsung Galaxyタブ10.1でテストされています。

— 2012年

Android 2.3.4を搭載したSamsung Galaxy S2で動作します

— MrUpsidown

Samsung Galaxy S2とAndroid 4.1.2で動作します

— Wessel Kranenborg 2013

これはうまくいきます！ページ全体をカバーするテーブルがあるので、要素を移動しないと上下にスクロールすることが難しくなります。誰かがこの問題に対処しましたか？要素がX秒間その特定の要素に触れるまで要素が移動しないようにするために何かを追加すると、うまくいくはずです。

— トム・

1/2014以降、Windows PhoneのInternet Explorerでは機能しません。うまくいけば、他のブラウザが利用可能になったときにこれが機能するでしょう。

— edcincy 2014年

sortableモバイルで仕事をするため。私はこのようなタッチパンチを使用しています：

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

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

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

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

— カラン・デュバル
ソース