3

このコードを使用して、タッチ イベントを使用して、タブレットの div 内で画像を移動しています。iPad でテストしたところ、画像を垂直、水平、またはその両方 (斜めから始めた場合) にうまく移動できることがわかりました。ただし、画像を垂直方向または水平方向に移動することから始めると、そのジェスチャーを終了して別のジェスチャーを開始するまで方向を変更できないこともわかりました。

タッチポイントの座標がどうであれ、一方の軸で動き始めると、もう一方の軸よりも優先されるようです。どのように開始したかに関係なく、この動作をオーバーライドして任意の方向に移動する方法はありますか、それとも Safari が touchMove を解釈する方法ですか?

より詳細なコードは、こちらの以前の質問で見つけることができます。

var clicking = false;
var previousX;
var previousY;

$("#scroll").touchStart(function(e) {
    e.preventDefault();
    previousX = e.clientX;
    previousY = e.clientY;
    clicking = true;
});

$(document).touchEnd(function() {  
    clicking = false;
});

$("#scroll").touchMove(function(e) {
    if (clicking) {
        e.preventDefault();
        var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
        var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
        $("#scroll").scrollLeft($("#scroll").scrollLeft() + (previousX - e.clientX));
        $("#scroll").scrollTop($("#scroll").scrollTop() + (previousY - e.clientY));
        previousX = e.clientX;
        previousY = e.clientY;
    }
});

$("#scroll").touchLeave(function(e) {
    clicking = false;
});

編集:確認したところ、Androidタブレットで正しく動作するため、iPadだけが問題を引き起こしています.

4

0 に答える 0