一、写在前面
如果我们想要实现拖拽的功能，必须要知道三个事件：
1、onmousedown：鼠标按下事件
2、onmousemove：鼠标移动事件
3、onmouseup：鼠标抬起事件
二、实现思路
我们当左键点击时，需要记录当前的鼠标点击位置相对于该元素左上角的x，y坐标，
这里我们使用diffX和diffY来表示。然后我们移动时需要不断计算当前元素距离浏
览器左边和上边的距离。然后给元素进行赋值。当鼠标抬起时，然后取消鼠标移动事
件和鼠标抬起事件。
三、原生代码
<!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: 0px; padding: 0px; } #drag { width: 200px; height: 200px; background: red; cursor: pointer; position: absolute; } </style> </head> <body> <div id="drag"></div> </body> <script> window.onload = function () { //获取drag元素 let drag = document.getElementById("drag") //当鼠标按下时 drag.onmousedown = function (e) { //做到浏览器兼容 e = e || window.event let diffX = e.clientX - drag.offsetLeft let diffY = e.clientY - drag.offsetTop //当拉着box移动时 document.onmousemove = function (e) { // 浏览器兼容 e = e || window.event let left = e.clientX - diffX let top = e.clientY - diffY if (left < 0) { left = 0 } else if (left > window.innerWidth - drag.offsetWidth) { left = window.innerWidth - drag.offsetWidth } if (top < 0) { top = 0 } else if (top > window.innerHeight - drag.offsetHeight) { top = window.innerHeight - drag.offsetHeight } drag.style.left = left + 'px' drag.style.top = top + 'px' } // 当鼠标抬起时 document.onmouseup = function (e) { this.onmousemove = null this.onmouseup = null } } } </script> </html>
