JS基于面向对象实现的拖拽功能示例
本文实例讲述了JS基于面向对象实现的拖拽功能。分享给大家供大家参考,具体如下:
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1{width:100px;height:100px;background:red;position:absolute;} #div2{width:100px;height:100px;background:yellow;position:absolute;} </style> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>无标题文档</title> <script> window.onload=function(){ newDrag("div1"); newDrag("div2"); } functionDrag(id) { var_this=this; this.oDiv=document.getElementById(id); this.disX=0; this.disY=0; this.oDiv.onmousedown=function(ev){ _this.fnDown(ev); returnfalse; }; } Drag.prototype.fnDown=function(ev) { var_this=this; varoEvent=ev||event; this.disX=oEvent.clientX-this.oDiv.offsetLeft; this.disY=oEvent.clientY-this.oDiv.offsetTop; document.onmousemove=function(ev){ _this.fnMove(ev); }; document.onmouseup=function(){ _this.fnUp(); }; }; Drag.prototype.fnMove=function(ev) { varoEvent=ev||event; varl=oEvent.clientX-this.disX; vart=oEvent.clientY-this.disY; if(l<0) { l=0; } elseif(l>document.documentElement.clientWidth-this.oDiv.offsetWidth) { l=document.documentElement.clientWidth-this.oDiv.offsetWidth; } if(t<0) { t=0; } elseif(t>document.documentElement.clientHeight-this.oDiv.offsetHeight) { t=document.documentElement.clientHeight-this.oDiv.offsetHeight; } this.oDiv.style.left=l+'px'; this.oDiv.style.top=t+'px'; }; Drag.prototype.fnUp=function() { document.onmousemove=null; document.onmouseup=null; }; </script> </head> <body> <divid="div1"></div> <divid="div2"></div> </body> </html>
继承
functionLimitDrag(id){ Drag.call(this,id);//继承属性 } for(variinDrag.prototype){ LimitDrag.prototype[i]=Drag.prototype[i]; }
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。