先创建一个元素

.container {
      height: 100px;
      width: 100px;
      background-color: rgba(102, 102, 102, .5);
      position: absolute;
      top: 0px;
      left: 0px;
    }

<div class="container" data-move="true"></div>

移动元素的方法

let client_position = null; //这个变量是存储要移动元素相对于屏幕的位置。
let origin = null;  //存储移动元素的起始位置（相对于屏幕的位置）
let move_ele = null //存储移动的元素
const mousedown = (e) => {  //鼠标按下事件的回调函数，代表开始移动的时候
  if (!e.target.getAttribute('data-move')) return //如果鼠标按下的位置不是移动的元素，则退出
  client_position = e.target.getBoundingClientRect()  //获取元素相对于屏幕的位置
  move_ele = e.target //存储移动的元素
  console.log('开始拖拽')
  window.addEventListener('mousemove', mousemove) //注册鼠标移动事件
  origin = {x: e.screenX, y: e.screenY} //存储移动元素的起始位置（相对于屏幕的位置）
}
const mousemove = (e) => {  //鼠标移动事件的回调函数，代表正在移动的过程
  const position = {x: e.screenX, y: e.screenY} //获取鼠标当前相对于屏幕的x, y
  const x = position.x - origin.x //计算从鼠标按下拖拽的偏移量x
  const y = position.y - origin.y //计算从鼠标按下拖拽的偏移量y
  move_ele.style.top = `${client_position.top + y}px` //更新位置
  move_ele.style.left = `${client_position.left + x}px` //更新位置
}
const mouseup = (e) => {  //鼠标松开事件的回调函数，代表移动结束的时候
  window.removeEventListener('mousemove', mousemove)  //删除鼠标移动事件
  console.log('结束拖拽')
}
window.addEventListener('mousedown', mousedown) //注册鼠标按下事件
window.addEventListener('mouseup', mouseup) //注册鼠标松开事件

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .container {
      height: 100px;
      width: 100px;
      background-color: rgba(102, 102, 102, .5);
      position: absolute;
      top: 0px;
      left: 0px;
    }
  </style>
</head>

<body>
  <div class="container" data-move="true"></div>   //自定义属性data-move表示当前元素是可拖拽移动元素
  <script>

    let client_position = null; //这个变量是存储要移动元素相对于屏幕的位置。
    let origin = null;  //存储移动元素的起始位置（相对于屏幕的位置）
    let move_ele = null //存储移动的元素
    const mousedown = (e) => {  //鼠标按下事件的回调函数，代表开始移动的时候
      if (!e.target.getAttribute('data-move')) return //如果鼠标按下的位置不是移动的元素，则退出
      client_position = e.target.getBoundingClientRect()  //获取元素相对于屏幕的位置
      move_ele = e.target //存储移动的元素
      console.log('开始拖拽')
      window.addEventListener('mousemove', mousemove) //注册鼠标移动事件
      origin = {x: e.screenX, y: e.screenY} //存储移动元素的起始位置（相对于屏幕的位置）
    }
    const mousemove = (e) => {  //鼠标移动事件的回调函数，代表正在移动的过程
      const position = {x: e.screenX, y: e.screenY} //获取鼠标当前相对于屏幕的x, y
      const x = position.x - origin.x //计算从鼠标按下拖拽的偏移量x
      const y = position.y - origin.y //计算从鼠标按下拖拽的偏移量y
      move_ele.style.top = `${client_position.top + y}px` //更新位置
      move_ele.style.left = `${client_position.left + x}px` //更新位置
    }
    const mouseup = (e) => {  //鼠标松开事件的回调函数，代表移动结束的时候
      window.removeEventListener('mousemove', mousemove)  //删除鼠标移动事件
      console.log('结束拖拽')
    }
    window.addEventListener('mousedown', mousedown) //注册鼠标按下事件
    window.addEventListener('mouseup', mouseup) //注册鼠标松开事件

  </script>
</body>

</html>

前端实现拖拽元素

先创建一个元素

移动元素的方法

代码