こちらの記事で要素をドラッグして移動するのが簡単に実装できることを知った
使っている要素技術は
onpointermove
: ポインターの座標が変化し、かつブラウザーのタッチ操作によってポインターがキャンセルされていないときに発生するイベントevent.buttons
: ボタンが押された状態を判断this.draggable = false
: デフォルトのドラッグの挙動をオフにする(オンのままimg要素をドラッグすると半透明の分身が現れ、ウィンドウが今で持っていくとダウンロードする)this.setPointerCapture(event.pointerId)
: ポインターデバイスの接点が要素から移動しても、要素がポインターイベントを受信し続ける(追随する)ようにする設定
this.setPointerCapture(event.pointerId)
はちょっとわかりづらかったが、マウスで要素をドラッグしたままウィンドウの外まで連れて行こうとしたときに設定ありなしの違いがわかった
設定していない場合は要素はウィンドウの境界で止まってしまうが、設定しているとマウスに追随しウィンドウから見えなくなる(その際ウィンドウにはスクロールが現れる)
Element: pointermove イベント - Web API | MDN