[TOC]
  • mousemove 和 mouseup 的监听都放在 document 上， 防止移动太快丢失目标
  • 计算 left 和 top 实现拖拽移动 ```html 

改用 **transform **性能更好，因为可以避免 **reflow** 和 **repaint**
```html
<style>
  #xxx {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
  }
</style>

<body>
  <div id="xxx"></div>

  <script>
    let dragging = false
    xxx.addEventListener('mousedown', (e) => {
      dragging = true
    })

    document.addEventListener('mousemove', (e) => {
      if (dragging === false) return

      xxx.style.transform = `translate(${e.clientX - 50}px, ${e.clientY - 50}px)`
    })

    document.addEventListener('mouseup', () => {
      dragging = false
    })
  </script>
</body>