javascript拖动元素(盒子)

此处例子获取的盒子(div)为 element-ui 的 dialog 组件

青铜版（参考）

function moveDialog() {
  let isDown = false,
    x = 0,
    y = 0,
    left = 0,
    top = 0,
    el_dialog = document.querySelector('.el-dialog'),
    dia_header = el_dialog.querySelector('.el-dialog__header'),
    dia_footer = el_dialog.querySelector('.el-dialog__footer')
  // 鼠标按下
  dia_header.onmousedown = function (e) {
    // 获取x坐标和y坐标
    x = e.clientX
    y = e.clientY
    // 获取左边和上边的偏移量
    left = el_dialog.offsetLeft
    top = el_dialog.offsetTop
    // 开关
    isDown = true
    dia_header.style.cursor = 'grabbing'
  }
  dia_footer.onmousedown = function (e) {
    // 获取x坐标和y坐标
    x = e.clientX
    y = e.clientY
    // 获取左边和上边的偏移量
    left = el_dialog.offsetLeft
    top = el_dialog.offsetTop
    // 开关
    isDown = true
    dia_footer.style.cursor = 'grabbing'
  }
  // 鼠标移动
  document.onmousemove = function (e) {
    if (!isDown) return
    // 移动后位置
    let nx = e.clientX
    let ny = e.clientY
    // 移动距离
    let yd_x = x - nx
    let yd_y = y - ny
    // 左右
    if (yd_x > 0) {
      if (nx > 100) el_dialog.style.marginLeft = left - yd_x + 'px'
    } else {
      if (nx < document.body.clientWidth - 100) el_dialog.style.marginLeft = left + -yd_x + 'px'
    }
    // 上下
    if (yd_y > 0) {
      if (ny > 30) el_dialog.style.marginTop = top - yd_y + 'px'
    } else {
      if (ny < document.body.clientHeight - 30) el_dialog.style.marginTop = top + -yd_y + 'px'
    }
  }
  // 鼠标抬起
  document.onmouseup = function () {
    // 开关关闭
    isDown = false
    dia_header.style.cursor = 'grab'
    dia_footer.style.cursor = 'grab'
  }
}

moveDialog()

大佬版（参考）

function moveBox(box, item) {
  var isDragging = false
  var currentX
  var currentY
  var initialX
  var initialY
  var xOffset = 0
  var yOffset = 0

  box.addEventListener('mousedown', dragStart)
  box.addEventListener('mouseup', dragEnd)

  function dragStart(e) {
    initialX = e.clientX - xOffset
    initialY = e.clientY - yOffset

    if (e.target === item) {
      isDragging = true
      document.addEventListener('mousemove', drag)
    }
  }

  function dragEnd(e) {
    initialX = currentX
    initialY = currentY
    isDragging = false
    document.removeEventListener('mousemove', drag)
  }

  function drag(e) {
    if (isDragging) {
      e.preventDefault()
      currentX = e.clientX - initialX
      currentY = e.clientY - initialY
      xOffset = currentX
      yOffset = currentY
      setTranslate(currentX, currentY, box)
    }
  }

  function setTranslate(xPos, yPos, el) {
    el.style.transform = 'translate3d(' + xPos + 'px, ' + yPos + 'px, 0)'
  }
}

let el_dialog = document.querySelector('.el-dialog')
let dia_header = el_dialog.querySelector('.el-dialog__header')
moveBox(el_dialog, dia_header)

项目使用版

function moveBox(box, item) {
  let isDown = false,
    x,
    y,
    newX,
    newY,
    ydX,
    ydY,
    left = 0,
    top = 0

  item.onmousedown = (e) => {
    item.style.cursor = 'grabbing'
    x = e.clientX
    y = e.clientY
    left = box.offsetLeft
    top = box.offsetTop
    isDown = true
    document.addEventListener('mousemove', drag)
  }
  item.onmouseup = (e) => {
    item.style.cursor = 'grab'
    isDown = false
    document.removeEventListener('mousemove', drag)
  }
  function drag(e) {
    if (isDown) {
      newX = e.clientX
      newY = e.clientY
      ydX = newX - x
      ydY = newY - y
      box.style.marginLeft = left + ydX + 'px'
      box.style.marginTop = top + ydY + 'px'
    }
  }
}

let el_dialog = document.querySelector('.el-dialog')
let dia_header = el_dialog.querySelector('.el-dialog__header')
moveBox(el_dialog, dia_header)