Application of JavaScript class objects

Implementation of class object inheritance

Create a Parent object first 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 :p re "&GT;&LT;/SPAN&GT;};};D Rag.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" &GT;&LT;/SPAN&GT;_THIS.UPFN (evt);< Span style= "White-space:pre" &GT;&LT;/SPAN&GT;};;D Rag.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" &GT;&LT;/SPAN&GT;};D Rag.prototype.upfn=function () {<span style= "White-space:pre" ></span>document.onmousemove=null;< Span style= "White-space:pre" ></span>document.onmouseup=null;};

Create a Subset object and set the drag range

/** * @author zhaoshaobang *///inheritance attribute function Limitdrag (ID) {drag.call (this,id); this in//drag becomes limitdrag}//  Inherit parent method 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 ';};

Running results such as

Application of JavaScript class objects