JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita

要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe

[sifue]

CodePenで動かしてみた。これは便利な実装。 https://codepen.io/sifue/pen/MWxMyEb

[umai_bow]

やば。便利。setPointerCapture知らんかった。用途次第だが、パフォーマンスの面ではtransformを使った方がいいと思う

[Cherenkov]

drag

[mayumayu_nimolove]

あとでChatGPTで試す

[cpw]

へー。知らなかった。必要があれば使う。 ただドラッグさせるUIって使いづらいよね。

[popopoyyy]

idに$つけるの初めて見た

[ssuwam]

全く知らなかった。movementX, movementY, setPointerCaptureは特に便利。

[kagehiens]

おお、シンプル😗

[hdampty7]

んとね、これだけじゃなんも役に立たないの。普通はドロップ可能な領域があって、ドロップされたら、それに連動して表示と内部情報を書き換えたり、そっちのが重要でドラッグで移動するとかクソどうでもいいのよ。

[zkangaroo]

スマホでまともに動かない

[nimroder]

ブラウザの拡大率考慮されてなくない？ ドラッグするマウスの動きに対してN倍拡大の動きをする。

[izoc]

これは助かる。

[nekoline]

昔は jquery ui を使ってやってたやつ

[Shinwiki]

んん。、、？なんでじゃ。。？

[stabucky]

実際に書いて試してみた。正しく動作した。素晴らしい。

[ochikage]

]