面向对象的拖拽

今天闲来没事写一个简单的面向对象的拖拽，然后在运用继承方法做一个限制大小的拖拽，好下面先写一个面向对象的拖拽。

divclass{width:100px;height:100px;background:#ccc}

<div id='div1'>me</div>

function Drag(id){
    var _this = this;
    this.oDiv=document.getElementById(id);
    this.oDiv.onmousedown=function(ev){
      _this.fnDown(ev);
      return false;
    }
};
Drag.prototype.fnDown = function(ev){
    var _this = this;
    var oEvent=ev||event;
    this.disX=oEvent.clientX-this.oDiv.offsetLeft;
    this.disY=oEvent.clientY-this.oDiv.offsetTop
    document.onmousemove=function(ev){
      _this.fnMove(ev);
    }
    document.onmouseup=function(){
      _this.fnUp();
    }
};
Drag.prototype.fnMove = function(ev){
    var oEvent=ev||event;
    this.oDiv.style.left=oEvent.clientX-this.disX+"px";
    this.oDiv.style.top=oEvent.clientY-this.disY+"px";
};
Drag.prototype.fnUp = function(){
    document.onmousemove=document.onmouseup=null;
};

下边是继承 首先新建一个FuDrag()类  新增一个方法

function FuDrag(id){
  Drag.call(this,id);//构造函数
}
for(i in Drag.prototype){
  FuDrag.prototype[i] = Drag.prototype[i];//不同于引用，只改变了子集的
}
FuDrag.prototype.fnMove =function(ev){
    var oEvent=ev||event;
    l=oEvent.clientX-this.disX;
    t=oEvent.clientY-this.disY;
    if(l < 0){
      l = 0;
    }else if(l > document.documentElement.clientWidth-this.oDiv.offsetWidth){
      l= document.documentElement.clientWidth-this.oDiv.offsetWidth;
    };
    
    if(t <0){
      t = 0;
    }else if(t > document.documentElement.clientHeight-this.oDiv.offsetHeight){
      t= document.documentElement.clientHeight-this.oDiv.offsetHeight
    };
    this.oDiv.style.left=l+"px";
    this.oDiv.style.top=t+"px";  
}

然后后在测试一下，我们定义两个div  分别创建不同的对象

<div id='div1' class='divclass'></div>
<div id='div2' class='divclass'></div>

window.onload = function(){
  new Drag('div1');
  new FuDrag('div2')
}