【JS】原生js实现拖拽和边界限定
废话不多说，直接上代码
<!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> #box{ width: 100px; height: 100px; background-color: #0088dd; /* 必须开定位 绝对定位*/ position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="box"></div> </body> <script> //拖拽边界判断 //获取元素 var box = document.querySelector("#box"); //绑定鼠标按下事件 box.onmousedown = function(evt){ var e = evt || event; //offsetX返回鼠标指针相对于目标元素的 x 坐标。 var offsetX = e.offsetX; //offsetY返回鼠标指针相对于目标元素的 y 坐标。 var offsetY = e.offsetY; //绑定鼠标移动事件 document.onmousemove = function(evt){ var e = evt || event; //pageX/pageY鼠标相对于整个页面的X/Y坐标。 var x = e.pageX - offsetX; //div距离浏览器left边框的距离 var y = e.pageY - offsetY; //div距离浏览器top边框的距离 if(x < 0){ x = 0; } if(y < 0){ y = 0; } //window.innerWidth 获取文档显示区的宽度 var maxLeft = window.innerWidth - box.offsetWidth; if(x > maxLeft){ x = maxLeft; } //window.innerHeight 获取文档显示区的高度 var maxTop = window.innerHeight - box.offsetHeight; if(y > maxTop){ y = maxTop; } box.style.left = x + "px"; box.style.top = y + "px"; } document.onmouseup = function(){ document.onmousemove = null; } } </script> </html>
