实现思路:
- 鼠标按下开始拖拽
- 记录摁下鼠标时的鼠标位置以及元素位置
- 拖动鼠标记下当前鼠标的位置
- 鼠标当前位置-摁下时鼠标位置= 鼠标移动距离
- 元素位置= 鼠标移动距离+鼠标摁下时元素的位置
代码:
class Drag {
//构造函数
constructor(el) {
this.el = el;
//鼠标摁下时的元素位置
this.startOffset = {};
//鼠标摁下时的鼠标位置
this.startPoint = {};
let move = (e) => {
this.move(e);
};
let end = (e) => {
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", end);
};
el.addEventListener("mousedown", (e) => {
this.start(e);
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", end);
})
}
//摁下时的处理函数
start(e) {
let { el } = this;
this.startOffset = {
x: el.offsetLeft,
y: el.offsetTop
}
this.startPoint = {
x: e.clientX,
y: e.clientY
}
}
//鼠标移动时的处理函数
move(e) {
let { el, startOffset, startPoint } = this;
let newPoint = {
x: e.clientX,
y: e.clientY
}
let dis = {
x: newPoint.x - startPoint.x,
y: newPoint.y - startPoint.y,
}
el.style.left = dis.x + startOffset.x + "px";
el.style.top = dis.y + startOffset.y + "px";
}
}
(function () {
let box = document.querySelector("#box");
let dragbox = new Drag(box);
})()
为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为前端工程师,乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习圈:784783012 欢迎大家进群交流讨论,学习交流,共同进步。
当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有效资源还是很有必要的。
网友评论