类对象继承的实现
先创建一个父级对象Drag
/**
* @author zhaoshaobang
*/
function Drag(id){
<span style="white-space:pre"> </span>var _this=this;
<span style="white-space:pre"> </span>this.oDiv=document.getElementById(id);
<span style="white-space:pre"> </span>this.disX=0;
<span style="white-space:pre"> </span>this.disY=0;
<span style="white-space:pre"> </span>this.oDiv.οnmοusedοwn=function(evt)
<span style="white-space:pre"> </span>{
<span style="white-space:pre"> </span>_this.downFn(evt);
<span style="white-space:pre"> </span>};
};
Drag.prototype.downFn=function(evt){
<span style="white-space:pre"> </span>var e=evt||event;
<span style="white-space:pre"> </span>var _this=this;
<span style="white-space:pre"> </span>this.disX=e.clientX-this.oDiv.offsetLeft;
<span style="white-space:pre"> </span>this.disY=e.clientY-this.oDiv.offsetTop;
<span style="white-space:pre"> </span>document.οnmοusemοve=function(evt){
<span style="white-space:pre"> </span>_this.moveFn(evt);
<span style="white-space:pre"> </span>};
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>document.οnmοuseup=function(evt){
<span style="white-space:pre"> </span>_this.upFn(evt);
<span style="white-space:pre"> </span>};
};
Drag.prototype.moveFn=function(evt){
<span style="white-space:pre"> </span>var e=evt||event;
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>this.oDiv.style.left=e.clientX-this.disX+'px';
<span style="white-space:pre"> </span>this.oDiv.style.top=e.clientY-this.disY+'px';
<span style="white-space:pre"> </span>
};
Drag.prototype.upFn=function(){
<span style="white-space:pre"> </span>document.οnmοusemοve=null;
<span style="white-space:pre"> </span>document.οnmοuseup=null;
};
在创建一个子集对象,并设置拖拽范围
/**
* @author zhaoshaobang
*/
//继承属性
function LimitDrag(id)
{
Drag.call(this,id);//Drag中的this会变为LimitDrag
}
// 继承父级方法
for(var i in Drag.prototype)
{
LimitDrag.prototype[i]=Drag.prototype[i];
}
LimitDrag.prototype.moveFn=function(evt){
var e=evt||event;
var i=e.clientX-this.disX;
if(i<0)
{
i=0;
}
else if(i>document.documentElement.clientWidth-this.oDiv.offsetWidth)
{
i=document.documentElement.clientWidth-this.oDiv.offsetWidth;
}
this.oDiv.style.left=i+'px';
this.oDiv.style.top=e.clientY-this.disY+'px';
};
运行结果如下图