记录一下代码 这个是优化了的,在点击的位置开始移动,之前那种主要是在中心移动,-50的宽高,现在要减一个点击时刻的x,y和默认top left的差值,就可以实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
width: 100px;
height: 100px;
background: lightblue;
}
</style>
</head>
<body>
<div id="block"></div>
</body>
<script>
// 跟随移动 需要三个事件 1.mousedown事件 表示开始执行 2.mousemove事件 表示正在移动 3.mouseup事件,结束
let block=document.getElementById('block');
let x=0;//移动过程的坐标
let y=0;//
let tag=0;
let cx=parseInt(window.getComputedStyle(block).left);//记录鼠标点击时的坐标
let cy=parseInt(window.getComputedStyle(block).top);
block.onmousedown=function(e){
tag=1;
x=e.clientX;
y=e.clientY;
cx=parseInt(window.getComputedStyle(block).left)-x;//其实是差值
cy=parseInt(window.getComputedStyle(block).top)-y;
}
block.onmousemove=function(e){
// block.style.top
x=e.clientX;
y=e.clientY;
if(tag){
console.log(1);
block.style.top=y+cy+'px';
block.style.left=x+cx+'px';
}
}
block.onmouseup=function(){
tag=0;
}
</script>
</html>