3

ドラッグを使用して div を前後に移動しようとしています。この部分は、div にスクロール可能なコンテンツが含まれるまで正常に機能します。デスクトップではスクロールバーがあるため、これは問題ではありませんが、タッチ デバイスでは問題が発生します。タッチ イベントがドラッグ イベントと競合しているため、コンテンツをスクロールできません。ドラッグが垂直よりも水平かどうかを検出する条件を作成しようとしました..

私の望みは、垂直方向のタッチ インタラクション中のドラッグを防止することでしたが、UI ドラッグ メソッドは引き続き起動し、タッチ イベントをオーバーライドします。タッチ パンチ プラグインを使用して、タッチ デバイスでドラッグ可能にするため、状況が複雑になっている可能性があります。水平方向のドラッグ条件が満たされるまで、UI ドラッグ メソッドが完全に起動しないようにできれば素晴らしいと思います。これで干渉は解消されると思います。

// note the condition inside the drag function
      start: function(e){

        // get starting point of the drag
        startDragX = e.pageX;
        startDragY = e.pageY;
      },
      drag: function(e, ui){

        // prevent drag until user has moved 30px horizontally
        if (Math.abs(e.pageX - startDragX) < 30){
          ui.position.left = 0;
        } else {
          if (ui.position.left < 0) {

            // left drag
            ui.position.left = ui.position.left + 30;
          } else {
            // right drag
            ui.position.left = ui.position.left - 30;
          }
        }
      }

問題を示すフィドルを次に示します (タッチ デバイスでテストします): http://jsfiddle.net/jTMxS/2/

4

2 に答える 2

3

私はまったく同じ問題を抱えていましたが、多くのグーグル検索の後、ここで解決策を見つけました:

IPad Web アプリでのドラッグ アンド ドロップ - スクロール機能はそのまま

そこにある正しい答えと、彼らが言及したコードの一部を見てください（実際には他の質問にあります）。event.preventDefault()私の場合、スクロール動作を失いたくなかったので、行を削除しました。お役に立てれば。

編集クリスのコメントに従って、ここに私のソリューションの詳細を含めます。これら 2 つの機能のタッチ パンチ プラグインを置き換えました。

var init = function() {
    document.addEventListener('touchstart', handler, true);
    document.addEventListener('touchmove', handler, true);
    document.addEventListener('touchend', handler, true);
    document.addEventListener('touchcancel', handler, true);        
};

var handler = function(event) {
    var touch = event.changedTouches[0],
        simulatedEvent = document.createEvent('MouseEvent');

    simulatedEvent.initMouseEvent(
         { touchstart: 'mousedown', touchmove: 'mousemove', touchend: 'mouseup' } [event.type],
         true, true, window, 1, 
         touch.screenX, touch.screenY, touch.clientX, touch.clientY,
         false, false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
};

ドキュメントのinit準備ができたら、関数を呼び出す必要があります。

于 2014-06-05T14:53:45.237 に答える
0

これを試しましたか？

(element).ontouchstart = function(e){ 
    e.preventDefault(); 
}

上記を使用して、タッチを使用した Web アプリでの全体的なスクロールを防止しました。

または、Kuo.js、hammer.js などを使用して、ドラッグを 2 本指などの別のジェスチャにバインドすることもできます。

于 2013-10-09T22:43:54.960 に答える