function Drag(ele){
this.ele = ele;
this.addEvent();
}
Drag.prototype.addEvent = function(){
var that = this;
this.ele.onmousedown = function(eve){
that.downE = eve || window.event;
document.onmousemove = function(eve){
that.moveE = eve || window.event;
that.move();
}
document.onmouseup = function(){
that.up();
}
}
}
Drag.prototype.move = function(){
this.ele.style.left = this.moveE.clientX - this.downE.offsetX + "px";
this.ele.style.top = this.moveE.clientY - this.downE.offsetY + "px";
}
Drag.prototype.up = function(){
document.onmousemove = null;
}
// 虽然都是拖拽,但是一个有边界限定,另一个没有边界限定
function SmallDrag(ele){
Drag.call(this, ele)
}
for(var i in Drag.prototype){
SmallDrag.prototype[i] = Drag.prototype[i];
}
SmallDrag.prototype.move = function(){
let l = this.moveE.clientX - this.downE.offsetX;
let t = this.moveE.clientY - this.downE.offsetY;
if(l<0) l=0;
if(t<0) t=0;
this.ele.style.left = l + "px";
this.ele.style.top = t + "px";
}
var obox1 = document.getElementById("box1");
var obox2 = document.getElementById("box2");
new Drag(obox1);
new SmallDrag(obox2);
拖拽的继承
最新推荐文章于 2024-06-14 11:01:38 发布