UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【JavaScript】要素をドラッグして移動する

こちらの記事で要素をドラッグして移動するのが簡単に実装できることを知った

qiita.com

使っている要素技術は

  • onpointermove: ポインターの座標が変化し、かつブラウザーのタッチ操作によってポインターがキャンセルされていないときに発生するイベント
  • event.buttons: ボタンが押された状態を判断
  • this.draggable = false: デフォルトのドラッグの挙動をオフにする(オンのままimg要素をドラッグすると半透明の分身が現れ、ウィンドウが今で持っていくとダウンロードする)
  • this.setPointerCapture(event.pointerId): ポインターバイスの接点が要素から移動しても、要素がポインターイベントを受信し続ける(追随する)ようにする設定

this.setPointerCapture(event.pointerId)はちょっとわかりづらかったが、マウスで要素をドラッグしたままウィンドウの外まで連れて行こうとしたときに設定ありなしの違いがわかった

設定していない場合は要素はウィンドウの境界で止まってしまうが、設定しているとマウスに追随しウィンドウから見えなくなる(その際ウィンドウにはスクロールが現れる)

Element: pointermove イベント - Web API | MDN

draggable - HTML: ハイパーテキストマークアップ言語 | MDN

Element: setPointerCapture() メソッド - Web API | MDN