注意：
● 我们让盒子跟着鼠标在页面上移动，这个移动事件绑在页面上，而不是绑在盒子上，也就是绑在document上，不能绑在div上，不然你只能鼠标在盒子身上移动，在页面上移动就没效果；
● 只有当你属性按下盒子时，才能移动，所以鼠标移动事件要定义在鼠标按下事件里面；
● 在鼠标抬起时，给鼠标移动事件解绑；
方法一：在鼠标按下事件中定义鼠标移动事件
<!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: 100px;height: 100px;background-color: skyblue;/* 一定要有定位，不然下面关键点地方不起作用 */position: absolute;}</style></head><body><div id="box"></div><script>box.onmousedown = function(){console.log("down")document.onmousemove = function(evt){// 因为想让鼠标所在的地方是盒子的中心位置，var x = evt.clientX - box.offsetWidth/2var y = evt.clientY - box.offsetHeight/2if(y<=0) y=0if(x<=0) x=0if(x>=document.documentElement.clientWidth-box.offsetWidth)x = document.documentElement.clientWidth-box.offsetWidthif(y>=document.documentElement.clientHeight-box.offsetHeight)y = document.documentElement.clientHeight-box.offsetHeight//让盒子随着鼠标移动的关键点：就是把盒子定位在鼠标移动的位置box.style.left = x + "px"box.style.top = y + "px"}}box.onmouseup = function(){console.log("up")document.onmousemove = null}</script></body></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>Document</title><style>* {margin: 0;padding: 0;}div {width: 100px;height: 100px;background-color: skyblue;/* 一定要有定位，不然下面关键点地方不起作用 */position: absolute;}</style></head><body><div id="box"></div><script>isDown = falsebox.onmousedown = function () {console.log("down")isDown = true}box.onmouseup = function () {console.log("up")document.onmousemove = nullisDown = false}document.onmousemove = function (evt) {if (!isDown) return// 因为想让鼠标所在的地方是盒子的中心位置，var x = evt.clientX - box.offsetWidth / 2var y = evt.clientY - box.offsetHeight / 2if (y <= 0) y = 0if (x <= 0) x = 0if (x >= document.documentElement.clientWidth - box.offsetWidth)x = document.documentElement.clientWidth - box.offsetWidthif (y >= document.documentElement.clientHeight - box.offsetHeight)y = document.documentElement.clientHeight - box.offsetHeight//让盒子随着鼠标移动的关键点：就是把盒子定位在鼠标移动的位置box.style.left = x + "px"box.style.top = y + "px"}</script></body></html>
解释说明：
第三方标志，就是：isDown ，我们这里将鼠标移动事件从鼠标按下事件中拿出来以后，就需要用到这个第三方标志。初始值为false，当按下鼠标时赋值为true，鼠标抬起时又赋值为false，所以给鼠标移动事件加一个条件判断，当鼠标按下时，也就是isDown = true时才执行，否则就不执行，也就是return，return能阻止下面的代码执行。
