2. IT
    3. js面向对象继承（拖拽框）

    js面向对象继承（拖拽框）

    xiaoxiao2021-03-25  78
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>面向对象拖拽</title> <style> #div1{height: 200px; width: 200px; background: yellow; position: absolute;} #div2{height: 200px; width: 200px; background: green; position: absolute;} </style> </head> <body> <div id="div1">周杰伦</div> <div id="div2">张学友</div> <script src="js/Drag.js"></script> <script src="js/Limit.js"></script> <script> window.οnlοad=function() { new Drag('div1'); new limitDrag('div2'); } </script> </body>

    </html>

    function Drag(id) { var _this=this; this.disX=0;     this.disY=0; this.oDiv=document.getElementById(id); this.oDiv.οnmοusedοwn=function(ev) { _this.fnDown(ev); } }; 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.οnmοusemοve=function(ev) { _this.fnMove(ev); return false; } document.οnmοuseup=function() { _this.fnUp(); }  }; Drag.prototype.fnMove=function(ev) { var oEvent=ev||event; this.oDiv.style.left=oEvent.clientX-this.disX+'px';     this.oDiv.style.top=oEvent.clientY-this.disY+'px'; }; Drag.prototype.fnUp=function() { document.οnmοusedοwn=null; document.οnmοusemοve=null; };

    function limitDrag(id) { Drag.call(this,id);//继承属性 }; for(var i in Drag.prototype) { limitDrag.prototype[i]=Drag.prototype[i];//继承方法 } limitDrag.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; } if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth) { l=document.documentElement.clientWidth-this.oDiv.offsetWidth; } this.oDiv.style.left=l+'px';     this.oDiv.style.top=t+'px'; };

    转载请注明原文地址: https://ju.6miu.com/read-38156.html

    技术

    最新回复(0)