用原生，实现JavaScript的拖拽，需要考虑流畅度

1. 绑定事件

实现拖拽需要绑定mousedown、mousemove、mouseup事件。

el.addEventListener('mousedown', handleMouseDown)
el.addEventListener('mousemove', handleMouseMove)
el.addEventListener('mouseup', handleMouseUp)

2. 获取鼠标位置

在mousedown事件中，获取鼠标相对于元素左上角的位置。

function handleMouseDown(e) {
  const x = e.clientX - el.offsetLeft
  const y = e.clientY - el.offsetTop
}

3. 移动元素

在mousemove事件中，获取鼠标的位置，并将元素的位置设置为鼠标位置减去鼠标相对元素左上角的位置。

function handleMouseMove(e) {
  if (isDragging) {
    const newX = e.clientX - offsetX
    const newY = e.clientY - offsetY
    el.style.left = `${newX}px`
    el.style.top = `${newY}px`
  }
}

4. 释放元素

在mouseup事件中，释放元素。

function handleMouseUp() {
  isDragging = false
}

5. 优化

为了提高拖拽的流畅度，可以使用requestAnimationFrame来代替mousemove事件。

function handleMouseMove(e) {
  if (isDragging) {
    requestAnimationFrame(() => {
      const newX = e.clientX - offsetX
      const newY = e.clientY - offsetY
      el.style.left = `${newX}px`
      el.style.top = `${newY}px`
    })
  }
}