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

要素をドラッグして移動することは、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.setPointerCapture(event.pointerId)
    }
}
</script>

mousedown+mousemove+mouseup+フラグ変数を駆使して実現するコードはよくありますが複雑になるので、ドラッグするだけなら上記コードを使いましょう。