可拖拽的div

const div = document.createElement('div')
div.style.border = '1px solid red'
div.style.width = '100px'
div.style.height = '100px'
div.id = 'demo'
document.body.appendChild(div)

let drag = false //是否可拖拽
let position = [0, 0] //鼠标位置

div.onmousedown = (e) => {
  drag = true
  position = [e.clientX, e.clientY]
}

document.onmousemove = (e) => {
  if (drag === true) {
    const deltaX = e.clientX - position[0]
    const deltaY = e.clientY - position[1]
    const left = parseInt(div.style.left) || 0
    const top = parseInt(div.style.top) || 0
    div.style.top = top + deltaY + 'px'
    div.style.left = left + deltaX + 'px'
    position = [e.clientX, e.clientY]
  }
}

document.onmouseup = () => {
  drag = false
}