实现思路：
我要评论 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);
})()
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论