方法一:普通做法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>移动的方块</title> <style> #div{width: 100px; height: 100px; background: deeppink; position: absolute;top:100px;left:100px;} </style> </head> <body style="height:2000px;"> <div id="div"></div> <script> var oDiv = document.getElementById('div'); oDiv.onmousedown = function(ev){ var ev = ev || window.event; console.log(ev.clientX+'$$'+ev.clientY); //获取方块在页面的位置 disX = ev.clientX - oDiv.offsetLeft; disY = ev.clientY - oDiv.offsetTop; console.log(disX); console.log(disY); //鼠标移动 document.onmousemove = function(ev){ var ev = ev || window.event; var x = ev.pageX - disX; var y = ev.pageY - disY; oDiv.style.top = (y)+'px'; oDiv.style.left = (x)+'px'; } //鼠标抬起时，鼠标移动事件不生效 document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; } } </script> </body> </html>方法二:以下这个方法我认为更好(我测试过)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> .div{ width:100px; height:100px; background: yellow; position: fixed; left:10px; top:10px; } </style> <div class="div" id="showDragTableId"></div> <script> var aaaa = document.getElementById("showDragTableId"); aaaa.onmousedown = function(e){ e = e?e:window.event; //因为兼容问题 let startX; let startY; let moveSwitch = true; let currentLeft; let currentTop; e.stopPropagation(); startX = e.clientX; startY = e.clientY; currentLeft = document.getElementById("showDragTableId").offsetLeft; //通过对象获取对象的坐标 currentTop = document.getElementById("showDragTableId").offsetTop; document.onmousemove = function(e){ e.stopPropagation(); if(moveSwitch){ var x = e.clientX; //e.clientX是一个触摸事件，即是鼠标点击时的X轴上的坐标 var y = e.clientY; //e.clientY是一个触摸事件，即是鼠标点击时的Y轴上的坐标 var distanceX = x-startX; //X轴上获得移动的实际距离 var distanceY = y-startY; //Y轴上获得移动的实际距离 console.log(distanceX,distanceY); document.getElementById("showDragTableId").style.left = distanceX+currentLeft+"px"; document.getElementById("showDragTableId").style.top = distanceY+currentTop+"px"; } }; document.onmouseup = function(e){ e.stopPropagation(); moveSwitch = false; document.onmousemove = null; document.onmouseup = null; } } </script> </body> </html>
