Applications of javascript objects and javascript objects

Applications of javascript objects and javascript objects

Implementation of Class Object Inheritance

First create a parent-level object 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;};

Create a subset object and set the drag range

/*** @ Author zhaoshaobang * // inherits the attribute function LimitDrag (id) {Drag. call (this, id); // this in Drag changes to LimitDrag} // inherits the parent-level 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.doc umentElement. clientWidth-this.oDiv.offsetWidth;} this. oDiv. style. left = I + 'px '; this. oDiv. style. top = e. clientY-this.disY + 'px ';};

The running result is as follows: