本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
