实现原理
1、给目标div增加鼠标按下事件，记录下div对象的位置（left,top)和鼠标点击的位置（x,y)
2、监听鼠标移动事件，在移动过程中计算出鼠标的移动位置（nx,xy),然后实时计算出鼠标从点击到现在的偏移量，然后再将div的位置修改，这样就实现了div位置的变动
ps:目标div的属性position要设置absolute或者relative
3、div可以移动了，但什么时候停止移动呢？当然是鼠标弹起的时候，所以我们监听鼠标弹起的事件，并结束移动
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>div-drag-每天一个知识点</title>
<style>
.dragable {
width: 200px;
height: 200px;
border: 1px solid darkorchid;
position: relative;
}
</style>
</head>
<body>
<div class="dragable"></div>
</body>
<script>
var dragDiv = document.querySelector(".dragable");
dragDiv.addEventListener("mousedown", function(e) {
//获取div初始位置对象
var divRect = dragDiv.getBoundingClientRect();
//获取鼠标点击的位置
var downX = e.clientX;
var downY = e.clientY;
//开关打开
var startMove = true;
//设置样式为移动光标
dragDiv.style.cursor = "move";
window.onmousemove = function(e) {
if (!startMove) {
return;
}
let newLeft = e.clientX - downX + divRect.left;
let newTop = e.clientY - downY + divRect.top;
dragDiv.style.left = newLeft + "px";
dragDiv.style.top = newTop + "px";
return false;
};
window.onmouseup = function(e) {
//结束移动
startMove = false;
dragDiv.style.cursor = "default";
return false;
};
e.stopPropagation();
});
</script>
</html>
代码手敲可运行
当然这个实现还有很多可扩展或者不足，比如怎么限制div移动的范围，能力有限，在以后的日子里会尝试编写js组件，实现更完善的功能。