JS基于面向对象实现的拖拽功能示例
程序员文章站
2023-08-19 11:05:59
本文实例讲述了js基于面向对象实现的拖拽功能。分享给大家供大家参考,具体如下:
本文实例讲述了js基于面向对象实现的拖拽功能。分享给大家供大家参考,具体如下:
<html xmlns="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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script> window.onload=function(){ new drag("div1"); new drag("div2"); } function drag(id) { var _this=this; this.odiv=document.getelementbyid(id); this.disx=0; this.disy=0; this.odiv.onmousedown=function(ev){ _this.fndown(ev); return false; }; } drag.prototype.fndown=function(ev) { var _this=this; var oevent=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) { var oevent=ev||event; var l=oevent.clientx-this.disx; var t=oevent.clienty-this.disy; if(l<0) { l=0; } else if(l>document.documentelement.clientwidth-this.odiv.offsetwidth) { l=document.documentelement.clientwidth-this.odiv.offsetwidth; } if(t<0) { t=0; } else if(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> <div id="div1"></div> <div id="div2"></div> </body> </html>
继承
function limitdrag(id){ drag.call(this,id); //继承属性 } for(var i in drag.prototype){ limitdrag.prototype[i]=drag.prototype[i]; }
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《javascript切换特效与技巧总结》、《javascript动画特效与技巧汇总》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》、《javascript中json操作技巧总结》、《javascript错误与调试技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。