首页 > 代码库 > javascript 类对象的应用

javascript 类对象的应用

类对象继承的实现

先创建一个父级对象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.onmousedown=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.onmousemove=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.onmouseup=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.onmousemove=null;<span style="white-space:pre">	</span>document.onmouseup=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';
};

运行结果如下图


javascript 类对象的应用