MouseEvent.buttonとMouseEvent.movementX・MouseEvent.movementYを使って要素をドラッグ可能にする 🖱️

developer.mozilla.org

MouseEvent.buttonとMouseEvent.movementX・MouseEvent.movementYを使うと、ものすごく簡単に要素をドラッグ可能にすることができることを教わりました。
MouseEvent.buttonを使っているのでスマホをはじめとするタッチデバイスでは動きませんが、pointermoveにのみイベントを設定すれば良いので、ものすごくシンプルなコードになります。

DEMO

ソースコード

Javascript

document.querySelector('div').addEventListener('pointermove', (evt) => {
  if (evt.buttons) {
    evt.target.style.cssText = `
      top: ${ evt.target.offsetTop + evt.movementY }px;
      left: ${ evt.target.offsetLeft + evt.movementX }px;
    `;
    evt.target.setPointerCapture(evt.pointerId);
  }
});