方法一:普通做法
<!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>
