JS 拖动元素（move drag）

[hughfenghen]

其实是一个很简单、常见的功能，但 js 实现起来却要写很多行代码。
这里封一个函数，支持移动端、PC 端拖动，作为备份参考。

function moveEl (el: HTMLElement) {
  let elStartX = 0
  let elStartY = 0
  let touchStartX = 0
  let touchStartY = 0

  const onStart = ({ clientX, clientY }: { clientX: number, clientY: number }) => {
    touchStartX = clientX
    touchStartY = clientY
    const { x, y } = el.getBoundingClientRect()
    elStartX = x
    elStartY = y
  }

  const onMove = ({ clientX, clientY }: { clientX: number, clientY: number }): void => {
    const curX = clientX
    const curY = clientY
    el.style.left = elStartX + curX - touchStartX + 'px'
    el.style.top = elStartY + curY - touchStartY + 'px'
  }


  el.addEventListener('touchstart', (evt) => {
    onStart(evt.touches[0])
  })
  el.addEventListener('touchmove', (evt) => {
    evt.preventDefault()
    onMove(evt.touches[0])
  })


  const onMouseMove = (evt: MouseEvent): void => {
    evt.preventDefault()
    evt.stopPropagation()
    onMove(evt)
  }
  el.addEventListener('mousedown', (evt) => {
    onStart(evt)
    document.body.addEventListener('mouseup', onMouseUp)
    document.body.addEventListener('mousemove', onMouseMove)
  })

  const onMouseUp = (evt: MouseEvent) => {
    evt.preventDefault()
    evt.stopPropagation()
    document.body.removeEventListener('mouseup', onMouseUp)
    document.body.removeEventListener('mousemove', onMouseMove)
  }
}