mEvent.clientX：返回鼠标触点相对于浏览器可见视区(或有效区域)左边沿的的X坐标，不包括任何滚动偏移，单位为px。这个值会根据用户对可见视区的缩放行为而发生变化。
mEvent.clientY：返回鼠标触点相对于浏览器可见视区(或有效区域)上边沿的的Y坐标，不包括任何滚动偏移，单位为px。这个值会根据用户对可见视区的缩放行为而发生变化。
mEvent.pageX：鼠标触点相对于HTML文档左边沿的的X坐标，单位为px。和clientX 属性不同，这个值是相对于整个html文档的坐标，和用户滚动位置无关。因此当存在水平滚动的偏移时，这个值包含了水平滚动的偏移。
mEvent.pageY：鼠标触点相对于HTML文档上边沿的的Y坐标，单位为px。和clientY 属性不同，这个值是相对于整个html文档的坐标，和用户滚动位置无关。因此当存在垂直滚动的偏移时，这个值包含了垂直滚动的偏移。
mEvent.screenX：返回鼠标触点相对于屏幕左边沿的X坐标，单位为px。不包含页面滚动的偏移量。
mEvent.screenY：返回鼠标触点相对于屏幕上边沿的Y坐标，单位为px。不包含页面滚动的偏移量。
mEvent.offsetX：当鼠标事件发生时，鼠标触点距离事件源元素左侧的X轴方向上的距离，单位为px。
mEvent.offsetY：当鼠标事件发生时，鼠标触点距离事件源元素顶部的Y轴方向上的距离，单位为px。
2 示例演示 2.1 元素水平拖拽效果实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div></div> </body> <script> window.onload = () => { //获取拖拽实验对象 let el=document.getElementById("blackSquare"); //在该对象上绑定鼠标点击事件 el.onmousedown = (e) => { //鼠标按下，计算鼠标触点距离元素左侧的距离 let disX = e.clientX - el.offsetLeft; document.onmousemove = function (e) { //计算需要移动的距离 let t = e.clientX - disX; //移动当前元素 if (t >= 0 && t <= window.innerWidth - el.offsetWidth) { el.style.left = t + 'px'; } }; //鼠标松开时，注销鼠标事件，停止元素拖拽。 document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; } } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div></div> </body> <script> window.onload = () => { //获取拖拽实验对象 let el=document.getElementById("blackSquare"); //在该对象上绑定鼠标点击事件 el.onmousedown = (e) => { //鼠标按下，计算鼠标触点距离元素左侧的距离 let disY = e.clientY - el.offsetTop; document.onmousemove = function (e) { //计算需要移动的距离 let t = e.clientY - disY; //移动当前元素 if (t >= 0 && t <= window.innerHeight - el.offsetHeight) { el.style.top = t + 'px'; } }; //鼠标松开时，注销鼠标事件，停止元素拖拽。 document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; } } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div></div> </body> <script> window.onload = () => { //获取拖拽实验对象 let el=document.getElementById("blackSquare"); //在该对象上绑定鼠标点击事件 el.onmousedown = (e) => { //鼠标按下，计算鼠标触点距离元素左侧和顶部的距离 let disX = e.clientX - el.offsetLeft; let disY = e.clientY - el.offsetTop; document.onmousemove = function (e) { //计算需要移动的距离 let tX = e.clientX - disX; let tY = e.clientY - disY; //移动当前元素 if (tX >= 0 && tX <= window.innerWidth - el.offsetWidth) { el.style.left = tX + 'px'; } if (tY >= 0 && tY <= window.innerHeight - el.offsetHeight) { el.style.top = tY + 'px'; } }; //鼠标松开时，注销鼠标事件，停止元素拖拽。 document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; } } </script> </html>
https://www.jb51.net/article/201376.htm
https://www.jb51.net/article/201382.htm
https://developer.mozilla.org/zh-CN/docs/Web/API/Element
https://developer.mozilla.org/zh-CN/docs/Web/API/Touch
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent