三个即将要用的事件

onmousedown 鼠标按下事件
onmouseup 鼠标抬起事件
onmousemove 鼠标拖动事件

三组浏览器常用属性

clientX 与 clientY （**当前元素点击时 **距离浏览器最边上的距离（left 与 top））
offsetLeft 与 offsetTop （当前元素 距离浏览器最边上的距离（left 与 top））
innerWidth 与 innerHeight （浏览器整体宽和高）

定义一个我们即将要拖动的 div。

body {
  margin: 0;
  padding: 0;
}

.box {
  background: pink; 程序员爱爱 color you too?
  position: absolute;
}
复制代码

<div class="box" style="left: 100px; top: 100px; width: 100px; height: 100px;"></div>
复制代码

说明一下，需要在拖动时改变 div 的 left 和 top，所以设置定位给 div。

为什么要给 div 设置行内样式呢？
：便于更好的 **获取 **和修改

JavaScript部分详细讲解原理

// 获取到 DOM 元素
const box = document.querySelector('.box')
复制代码

第一步：注册 onmousedown （鼠标按下事件）事件

当我们点击元素时需要获取到鼠标点击元素的位置。

box.addEventlistener('mousedown', function(event){
   // 元素距离最左边的位置，理解为：你的 left 值是多少
    let offsetLeft = box.offsetLeft
    let offsetTop = box.offsetTop
    	
   // 元素距离最左边的位置（注意：这个位置是鼠标点下去距离浏览器左边的位置，是包含 div 元素的）
    let x = event.clientX - offsetLeft
    let y = event.clientY - offsetTop
})
复制代码

现在根据 clientX 与 clientY，获取到鼠标在 div 元素中的位置。

现在我们点击一下 div 元素，看到 div 中的红点位置，是我们鼠标点击的位置，看到控制台中的输入。

我们每次点击都是在随机的一个位置，所以需要获取到每次鼠标点击在 div 元素上的位置。

第二步：监听 onmousemove 事件

document.onmousemove = function (event) {
    let left = event.clientX - x
    let top = event.clientY - y
}
复制代码

当鼠标点击在 div元素上并且不松开的情况下，拖动着元素。

开始计算 div元素的横纵值（left 和 top）

第三步：元素是否超出浏览器边界

东：右边

if((box.offsetLeft + box.style.width) > window.innerWidth){
   box.style.left = window.innerWidth - parseInt(box.style.width) + "px"
}
复制代码

南：下边

if((box.offsetTop + box.style.height) > window.innerHeight){
    box.style.top = window.innerHeight - parseInt(box.style.height) + 'px'
}
复制代码

西：左边

if (box.offsetLeft < 0) {    box.style.left = 0 + "px"}
复制代码

北：上边

if (box.offsetTop < 0) {
    box.style.top = 0 + "px"
}
复制代码

完整代码

HTML

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AUTHOR:CUMIN</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .box {
      background: pink; programmer most love love pink
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="box" style="left: 100px; top: 100px; width: 100px; height: 100px;"></div>
</body>
</html>
复制代码

JavaScript

const box = document.querySelector('.box')

    const mousedown = (event) => {
      console.log('鼠标点击位置 ———— 距离浏览器最左边的位置：'+event.clientX)
      console.log('元素距离浏览器最左边的位置：' + box.offsetLeft)
      let innerX = event.clientX - box.offsetLeft
      let innerY = event.clientY - box.offsetTop

      box.style.borderWidth = "1px";
      box.style.borderStyle = "solid";
      box.style.borderColor = "black";
      // 移动时
      document.onmousemove = function (event) {
        box.style.left = event.clientX - innerX + "px"
        box.style.top = event.clientY - innerY + "px"
      }

      // 抬起时
      document.onmouseup = function () {
        document.onmousemove = null
        document.mousedown = null
        control()
        box.style.borderWidth = "";
        box.style.borderStyle = "";
        box.style.borderColor = "";
      }
    }

    // 超出边界处理
    const control = function () {
      if (box.offsetLeft < 0) {
        box.style.left = 0 + "px"
      }

      if (box.offsetTop < 0) {
        box.style.top = 0 + "px"
      }

      if ((box.offsetLeft + parseInt(box.style.width)) > window.innerWidth) {
        box.style.left = (window.innerWidth - parseInt(box.style.width)) + "px"
      }

      if ((box.offsetTop + parseInt(box.style.height)) > window.innerHeight) {
        box.style.top = (window.innerHeight - parseInt(box.style.height)) + "px"
      }

    }

    // 按下时
    box.addEventListener('mousedown', mousedown, false)
复制代码