首页 > 代码库 > 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 类对象的应用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。