445
Go to list of users who liked
445
Share on X(Twitter)
Share on Facebook
More than 1 year has passed since last update.
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。
しかし、それを簡単に実現するコードは意外と知られていません。
画像をドラッグするとグリグリ動かせるコード
<imgid="$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=falsethis.setPointerCapture(event.pointerId)}}</script>mousedown+mousemove+mouseup+フラグ変数を駆使して実現するコードはよくありますが複雑になるので、ドラッグするだけなら上記コードを使いましょう。
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme