<body>
<div class="box"></div>
</body>
<style>
body {
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
// 要求：
// 1. 实现一个可拖动的`<div>`元素
// 2. 当鼠标按下该元素时，元素可以跟随鼠标移动，
// 3. 当鼠标松开，元素不在跟随鼠标移动
// 获取div
var box = document.getElementsByClassName("box")[0];
// console.log(box);
// console.log(box.offsetWidth / 2, box.offsetHeight / 2);
//设置一个变量去判断鼠标是在box否按下
var flag = false;
//给box绑定鼠标按下事件
var delX = 0;
var delY = 0;
box.onmousedown = function () {
flag = true;
//获取需要删除的距离
/*
为什么说要删除呢？
因为我们在移动div的时候可以看作是div的右上角的那个点为基准进行移动
当鼠标点击时鼠标的位置不为零
若是以这个为数据对div进行移动，那么div的右上角是跟随鼠标的位置，
不减去的话鼠标就不能在视觉上在div中间，
减去后鼠标的位置就能在div的相对位置中，也就是说开始的时候鼠标在div中那个位置移动时就能保持在div中的位置
*/
delX = event.clientX - box.offsetLeft;
delY = event.clientY - box.offsetTop;
// console.log(delX, delY);
// console.log(event.clientX, event.clientY);
// console.log(box.offsetLeft, box.offsetTop);
};
//整个div绑定鼠标移动事件
// 这一步是为了方便获取鼠标相对与文档的位置数据
window.onmousemove = function () {
if (flag) {
//删除多余的距离 保持住按下的位置
// var x = event.clientX - delX;
// var y = event.clientY - delY;
//删除多余的距离 保持住鼠标在div中心
var x = event.clientX - box.offsetWidth / 2;
var y = event.clientY - box.offsetHeight / 2;
// console.log(event.clientX, event.clientY);
box.style.left = x + 'px';
box.style.top = y + 'px';
}
};
//给div绑定了 鼠标抬起事件
// 这样就不会继续记录鼠标移动
window.onmouseup = function () {
flag = false;
};
</script>
如果觉得《原生js实现滑块拖动功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
