8

これらのイベントがどのように機能するかについての明確なガイドを探していましたが、今では始めたときよりも混乱しています.

私のサイトの特定の機能には、ドラッグ アンド ドロップが含まれます。現在、モバイル デバイス (またはマウスのないもの) は、ユーザーが項目を選択し、[移動] ボタンをタップしてから、ドロップ ポイントをタッチすることでサポートされています。これは非常にうまく機能しますが (アイテムは目に見えるグリッド上にあります)、ドラッグほどユーザーフレンドリーではありません。

私の最初の理解では、 を割り当てる場所はどこでも、同じハンドラーを 、 および にそれぞれ割り当てることelement.onmousedownもelement.onmousemoveできます。element.onmouseupelement.ontouchstartelement.ontouchmoveelement.ontouchend

ただし、次の疑問が残ります。

  • タッチポイントの座標を取得するにはどうすればよいですか?また、それは何に対して相対的ですか?
  • ビューはパンされますか (ドラッグのデフォルト アクション)、そうであればキャンセル可能ですか?
  • 1 本の指がたまたまドラッグ可能な要素上にある場合に、ピンチしてズームするなどのマルチタッチ操作の妨げにならないようにするにはどうすればよいですか?
4

3 に答える 3

2

デバイスの幅/高さ (window.innerHeight/window.innerWidth) を測定することで、座標を決定できます。

この記事は、タッチ イベントとそれらのオーバーライドの良い出発点です: http://www.html5rocks.com/en/mobile/touch/

マルチタッチ ジェスチャは、ドラッグ可能な要素を妨げてはなりません。イベントハンドラーが干渉している場合は、イベントハンドラーで条件を使用できます: (event handler) if (event.touches === 1) handle the event

于 2012-08-05T16:13:31.937 に答える
0

モバイルとデスクトップの画面座標の違いについて簡単にまとめます。screenX/Y、clientX/Y、pageX/Y の違いは何ですか?

そして、touchmoveイベントリスナーを実装する実際の例:

 this.canvas.addEventListener("touchmove", function(e) {
        e.preventDefault();
        touchPosition(e);
    }, false);

var getCanvasPos = function(el) {
    var canvas = document.getElementById(el) || this.getCanvas();
    var _x = canvas.offsetLeft;
    var _y = canvas.offsetTop;

    while(canvas = canvas.offsetParent) {
        _x += canvas.offsetLeft - canvas.scrollLeft;
        _y += canvas.offsetTop - canvas.scrollTop;
    }

    return {
        left : _x,
        top : _y
    }
};

var touchPosition = function(e) {
    var mouseX = e.clientX - this.getCanvasPos(e.target).left + window.pageXOffset;
    var mouseY = e.clientY - this.getCanvasPos(e.target).top + window.pageYOffset;
    return {
        x : mouseX,
        y : mouseY
    };
};
于 2012-08-05T16:41:29.037 に答える