javascript 類對象的應用，javascript類對象

javascript 類對象的應用，javascript類對象

類對象繼承的實現

先建立一個父級對象Drag

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';};

運行結果如