用 mouse 事件写一个可拖拽的 div

今天刷题的过程中看到一个有意思的题目，用 mouse 事件写一个可拖拽的 div，个人以为可以凭脑子想象一下就能写出来，但是很显然脑子说：啥？你说啥？写的过程中涉及 div 的绝对定位样式，鼠标的位置，还有一些差值计算，于是乎我就画了个图，图画出来以后，简直不要太清晰哦，两秒钟搞定！不多说了，下面上才艺：

精髓在于，在鼠标点击时判断鼠标在 div 内的 offsetX 和 offsetY 并保存起来，然后在鼠标移动的过程中计算 pageX 和 pageY 与 offsetX 和 offsetY 分别做差值，并将其赋值给决定定位下的 div 的 left 和 top，注意加 'px' 单位。下面是代码及效果演示：

<div id="box" style="width: 100px; height: 120px; background-color: red; position: absolute;"></div>

<script type="text/javascript">
  var box = document.getElementById('box');

  box.addEventListener('mousedown', (event) => {
    let innerBoxLeft = event.offsetX;
    let innerBoxTop = event.offsetY

    function moving(event) {
      box.style.left = (event.pageX - innerBoxLeft + 'px')
      box.style.top = (event.pageY - innerBoxTop + 'px')
    }

    document.addEventListener('mousemove', moving, false)

    document.addEventListener('mouseup', (event) => {
      document.removeEventListener('mousemove', moving)
    }, false)
  })
</script>