ドラッグ(エレメント)2020/08/14

 ポインティングデバイスの移動を受け取るには、pointermovetouchmovemousemoveイベント等を使用します。

 リトルうさぎをドラッグで移動させるサンプルです。

 PointerEventMouseEventTouchEventの三種に対応しようとしたら、想像以上にごちゃごちゃしたコードになってしまいました。
 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);