ポインティングデバイスの移動を受け取るには、
pointermove
、
touchmove
、
mousemove
イベント等を使用します。
リトルうさぎをドラッグで移動させるサンプルです。
PointerEvent
と
MouseEvent
と
TouchEvent
の三種に対応しようとしたら、想像以上にごちゃごちゃしたコードになってしまいました。
touchstart
はすべてのポインタがまとめて送られてくるため、どれが対象エレメントのポインタなのかわからず、キャラクタリストから使われていないポインタIDを探すことで暫定対応して言います。
touchmove
は単純にループ回してで再呼び出ししています。
touchend
はリストからポインタIDが消失していれば離されたと解釈しています。
ドラッグ系のイベントはポイントが枠外に移動してしまうことを考慮して、対象エレメントではなく
document
へと設定します。ドラッグ中のみ設定し、リリース後は解除するのがマシン負荷的にベターです。
タッチ操作をする対象は、画面がスクロールしないように
touch-action
スタイルに
pinch-zoom
を指定します。ズームと二本指スクロールだけが許可される設定です。
複数タッチ操作が必要なアプリケーションでは
none
を指定します。
node.style.touchAction = "none";
// イベント追加
if(window.PointerEvent)
{
node.addEventListener("pointerdown", chara.onPress, false);
}else
{
node.addEventListener("touchstart", chara.onPress, false);
node.addEventListener("mousedown", chara.onPress, false);
}
// イベント動的追加
if(event.type != null && event.type.indexOf("pointer") > -1)
{
document.addEventListener("pointermove", this.onMove, false);
document.addEventListener("pointerup", this.onRelease, false);
document.addEventListener("pointerleave", this.onRelease, false);
}else
{
document.addEventListener("touchmove", this.onMove, false);
document.addEventListener("mousemove", this.onMove, false);
document.addEventListener("touchend", this.onRelease, false);
document.addEventListener("touchcancel", this.onRelease, false);
document.addEventListener("mouseup", this.onRelease, false);
document.addEventListener("mouseleave", this.onRelease, false);
}
// イベント解除
document.removeEventListener("pointermove", this.onMove, false);
document.removeEventListener("pointerup", this.onRelease, false);
document.removeEventListener("pointerleave", this.onRelease, false);
document.removeEventListener("touchmove", this.onMove, false);
document.removeEventListener("mousemove", this.onMove, false);
document.removeEventListener("touchend", this.onRelease, false);
document.removeEventListener("touchcancel", this.onRelease, false);
document.removeEventListener("mouseup", this.onRelease, false);
document.removeEventListener("mouseleave", this.onRelease, false);