综合开发

js面向对象开发之–元素拖拽

微信扫一扫,分享到朋友圈

js面向对象开发之–元素拖拽

##-元素拖拽原理

 1.鼠标按下时开始拖拽

 2.记录按下时的鼠标位置 和 元素位置

 3.移动后获取到鼠标的新位置

 4.用鼠标的新位置 – 摁下时的鼠标位置 = 鼠标移动的距离

 5.元素当前新位置 = 鼠标移动距离 + 按下时元素的位置

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= newDrag(box);
}());

备注:摘自高级javascript

技术图片

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
},false);//这里省略了其他代码
btn.removeEventListener("click", function(){ //没有用! alert(this.id);
},false);

在这个例子中,我们使用 addEventListener()添加了一个事件处理程序。虽然调用 remove- EventListener()时看似使用了相同的参数,但实际上,第二个参数与传入 addEventListener()中 的那一个是完全不同的函数。而传入 removeEventListener()中的事件处理程序函数必须与传入 addEventListener()中的相同,如下面的例子所示

 var btn = document.getElementById("myBtn");var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效

重写后的这个例子没有问题,是因为在 addEventListener()和 removeEventListener()中使 用了相同的函数handler。

js面向对象开发之–元素拖拽

原文地址:https://www.cnblogs.com/yxfboke/p/12580409.html

看完这篇,一起为CSS技能充电

上一篇

潘石屹自爆新爱好:拉开收入的真相,45岁前要懂

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

js面向对象开发之–元素拖拽

长按储存图像,分享给朋友