js面向对象开发之--元素拖拽
2021-03-31 22:25
标签：column 程序 原理 pre 代码 listen element list 图片 ##-元素拖拽原理： 1.鼠标按下时开始拖拽 2.记录按下时的鼠标位置 和 元素位置 3.移动后获取到鼠标的新位置 4.用鼠标的新位置 - 摁下时的鼠标位置 = 鼠标移动的距离 拖拽类调用： 备注：摘自高级javascript 在这个例子中，我们使用 addEventListener()添加了一个事件处理程序。虽然调用 remove- EventListener()时看似使用了相同的参数，但实际上，第二个参数与传入 addEventListener()中 的那一个是完全不同的函数。而传入 removeEventListener()中的事件处理程序函数必须与传入 addEventListener()中的相同，如下面的例子所示 重写后的这个例子没有问题，是因为在 addEventListener()和 removeEventListener()中使 用了相同的函数handler。 js面向对象开发之--元素拖拽 标签：column 程序 原理 pre 代码 listen element list 图片 原文地址：https://www.cnblogs.com/yxfboke/p/12580409.html class Drag {
// 构造函数
constructor(el) {
this.el = el;
// 鼠标按下时元素的的位置
this.startOffeset = {};
// 鼠标按下时的鼠标的位置
this.startPoint = {};
let move = (e) => {
this.move(e);
}
let end = (e) => {
el.removeEventListener(‘mousemove‘, move);
el.removeEventListener(‘mouseup‘, end);
}
el.addEventListener(‘mousedown‘, (e) => {
this.start(e);
el.addEventListener(‘mousemove‘, move);
el.addEventListener(‘mouseup‘, end);
});
}
// 鼠标摁下时的处理函数
start(e) {
let { el } = this;
this.startOffeset = {
x: el.offsetLeft,
y: el.offsetTop,
};
this.startPoint = {
x: e.clientX,
y: e.clientY,
}
}
// 移动时的处理函数
move(e) {
let { el, startOffeset, startPoint } = this;
let nowPoint = {
x: e.clientX,
y: e.clientY,
};
let dis = {
x: nowPoint.x - startPoint.x,
y: nowPoint.y - startPoint.y
}
el.style.left = dis.x + startOffeset.x + ‘px‘;
el.style.top = dis.y + startOffeset.y + ‘px‘;
}
}
(function(){
let box = document.querySelector(‘#box‘);
let dragBox = new Drag(box);
}());
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
//这里省略了其他代码
btn.removeEventListener("click", function(){ //没有用! alert(this.id);
}, false);
var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效
上一篇：js 判断屏幕下拉上滑操作
下一篇：AJAX操作