面向对象-拖拽
<script> // 一个页面上实现两个拖拽 // 不同的效果:一个有边界限定,一个没有 function Drag(ele){ this.ele = ele; // 因为使用事件监听式绑定和删除 // 又将事件处理函数单独封装成原型上的方法 // 导致,this指向的问题 // 修复之后 // 导致,绑定和删除的不是一个事件处理函数 // 所以,提前处理事件处理函数中的this指向,并将处理之后的函数保存到实例身上,方便绑定和删除找到同一个事件处理函数 //事件绑定之前就将this绑定出来 this.m = this.move.bind(this);//=>事件监听函数中的第三个回调函数;move;这个this指的是this.ele本身 this.u = this.up.bind(this);//=>事件监听函数中的第三个回调函数;up; this.addEvent(); } Drag.prototype.addEvent = function(){ this.ele.addEventListener("mousedown",this.down.bind(this))//把正常的this传到down里面去 } Drag.prototype.down = function(eve){ var e = eve || window.event; this.x = e.offsetX; this.y = e.offsetY; document.addEventListener("mousemove",this.m); document.addEventListener("mouseup",this.u); e.preventDefault(); } Drag.prototype.move = function(eve){ var e = eve || window.event; this.ele.style.left = e.clientX - this.x + "px"; this.ele.style.top = e.clientY - this.y + "px"; } Drag.prototype.up = function(){ document.removeEventListener("mousemove",this.m)//绑定和删除处理的是同一个事件处理函数,绑定的是bind返回的函数,删除的是move。bind每次执行都会返回一个新函数,绑定的是一个,删除的是一个,两个不相同。在绑定之前,只能把它存出来 document.removeEventListener("mouseup",this.u) } var obox1 = document.querySelector(".box1"); var obox2 = document.querySelector(".box2"); new Drag(obox1); new Drag(obox2); </script>
混合继承拖拽:
<script>
// 一个页面上实现两个拖拽
// 不同的效果:一个有边界限定,一个没有
function Drag(ele){
this.ele = ele;
this.m = this.move.bind(this);
this.u = this.up.bind(this);
this.addEvent();
}
Drag.prototype.addEvent = function(){
this.ele.addEventListener("mousedown",this.down.bind(this))
}
Drag.prototype.down = function(eve){
var e = eve || window.event;
this.x = e.offsetX;
this.y = e.offsetY;
document.addEventListener("mousemove",this.m);
document.addEventListener("mouseup",this.u);
e.preventDefault();
}
Drag.prototype.move = function(eve){
var e = eve || window.event;
this.ele.style.left = e.clientX - this.x + "px";
this.ele.style.top = e.clientY - this.y + "px";
}
Drag.prototype.up = function(){
document.removeEventListener("mousemove",this.m)
document.removeEventListener("mouseup",this.u)
}
function SmallDrag(ele){
Drag.call(this,ele) //有则传,无则传
}
for(var i in Drag.prototype){
SmallDrag.prototype[i] = Drag.prototype[i]
}
var obox1 = document.querySelector(".box1");
var obox2 = document.querySelector(".box2");
new Drag(obox1);
new SmallDrag(obox2);
// 继承的应用场景:
// 多个对象,互相之间有多个功能的重叠,可以使用继承,继承重叠的方法
// 继承之后,如有差别,可以该别继承之后的方法
</script>
class继承-拖拽
<script> // 一个页面上实现两个拖拽 // 不同的效果:一个有边界限定,一个没有 class Drag{ constructor(ele){ this.ele = ele; this.m = this.move.bind(this); this.u = this.up.bind(this); this.addEvent(); } addEvent(){ this.ele.addEventListener("mousedown",this.down.bind(this))//把正常的this传到down里面去 } down(eve){ var e = eve || window.event; this.x = e.offsetX; this.y = e.offsetY; document.addEventListener("mousemove",this.m); document.addEventListener("mouseup",this.u); e.preventDefault(); } move(eve){ var e = eve || window.event; this.ele.style.left = e.clientX - this.x + "px"; this.ele.style.top = e.clientY - this.y + "px"; } up(){ document.removeEventListener("mousemove",this.m) document.removeEventListener("mouseup",this.u) } } class SmallDrag extends Drag{ constructor(ele){ super(ele) } } var obox1 = document.querySelector(".box1"); var obox2 = document.querySelector(".box2"); new Drag(obox1); new SmallDrag(obox2); </script>
长风破浪会有时,直挂云帆济沧海