总的来说，就是要在要在鼠标移动（onmousemove）的时候修改的就是div元素的left 和 top值
首要要设置一个状态为false，
var flat = fales只有状态为true的时候，才可以监控鼠标的clientX和clientY
获取当前的left和top的值的方式（没有移动之前）
document.defaultView.getComputedStyle(div)["top"])
document.defaultView.getComputedStyle(div)["left"])
鼠标按下的时候，状态为ture,(flag = true),获取当前鼠标的位置e.clientX和e.clientY
当前位置减去初始位置，就是 鼠标移动的位置
e.clientX - currentXe.clientY-currentY
获取到了没有移动之前的位置，再加上鼠标移动的位置，就可以在鼠标移动的时候，对元素进行拖动。
也就是设置div.style.left的值
鼠标松开的时候，状态false
具体代码如下：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var div = document.querySelector("div");
// 定义一个状态，只有状态为true的时候，才能监控clientX，clientY
var flag = false;
// 定义鼠标的当前位置
var currentX = 0;
var currentY = 0;
// 鼠标发生了移动
div.onmousemove = function (e) {
// e.clientX,e.clientY指的是要操作的元素到边缘的距离
if (flag) {
// 鼠标移动了，就用移动的位置减去一开始定义的初始位置
// 这样就得到了偏移量
// e.clientX - currentX
// e.clientY - currentY
// 鼠标移动了，获取当前的left值，加上偏移量，就可以实现div的移动
div.style.left =
parseInt(document.defaultView.getComputedStyle(div)["left"]) +
(e.clientX - currentX) +
"px";
div.style.top =
parseInt(document.defaultView.getComputedStyle(div)["top"]) +
(e.clientY - currentY) +
"px";
// console.log(e.clientX - currentX, e.clientY - currentY);
// 更新当前位置，
currentX = e.clientX;
currentY = e.clientY;
}
};
// 鼠标按下，状态为ture,把鼠标的位置赋值给初始位置
div.onmousedown = function (e) {
flag = true;
// 鼠标按下，获取到当前位置
currentX = e.clientX;
currenty = e.clientY;
};
// 鼠标松开，状态为false
div.onmouseup = function () {
flag = false;
};
</script>
</html>
