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程序设计有所帮助。