主要使用到了节流开关和获取event的鼠标点击位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>节流完成拖拽</title>
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: skyblue;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script>
// 获取到div
var div = document.querySelector("div");
// 当鼠标点击div按着不松时触发事件
div.onmousedown = function (e) {
// 兼容IE
e = e || window.event;
// 获取鼠标点击的当前元素的X轴距离
var offsetx = e.offsetX;
// 获取鼠标点击的当前元素的Y轴距离
var offsety = e.offsetY;
// 设置节流开关
var flg = true;
// 当鼠标在dom上移动时触发事件
document.onmousemove = function (e) {
// 判断节流开关是否为true
if (flg) {
// 先把节流开关给关闭
flg = false;
// 兼容IE
e = e || window.event;
// div的左边为当前页面点击的dom页面X轴距离减去点击元素的X轴距离
div.style.left = e.clientX - offsetx + "px";
// div的顶部为当前页面点击的dom页面Y轴距离减去点击元素的Y轴距离
div.style.top = e.clientY - offsety + "px";
// 设置定时器 设置一定时间 打开一次节流开关
setTimeout(function () {
// 给节流开关打开
flg = true;
}, 10);
}
};
};
// 当鼠标点击div松开时触发事件
div.onmouseup = function () {
// 給dom的移动事件清空
// 第一种给dom的事件赋值为null
document.onmousemove = null;
// 第一种给dom的事件赋值为""
// document.onmousemove = "";
};
</script>
</body>
</html>