分别用普通过程，面向对象过程，和继承方法实现拖拽效果

来源：互联网发布：浙江外商直接投资数据编辑：程序博客网时间：2024/06/06 01:45

首先我们在这里先写一个正常逻辑下，一个面向过程的js拖拽demo

<!DOCTYPE html><html><head>    <meta charset="utf-8"/><title></title><style type="text/css">          div{width: 200px;height:200px;background:red;position: absolute;}</style></head><body><div></div><script type="text/javascript">            window.onload=function(){               var oDiv=document.getElementsByTagName('div')[0];               oDiv.onmousedown=function(e){               var ev=e||event;               var posX=ev.clientX-oDiv.offsetLeft;               var posY=ev.clientY-oDiv.offsetTop;               document.onmousemove=function(ev){               var oEvent=ev||event;               oDiv.style.left=oEvent.clientX-posX+'px';               oDiv.style.top=oEvent.clientY-posY+'px';               };               document.onmouseup=function(){               document.onmousemove=null;               document.onmouseup=null;               }               };            }            </script></body></html>

接下来我们如何去转为面向对象编码模式

<!DOCTYPE html><html><head>    <meta charset="utf-8"/><title></title><style type="text/css">          div{width: 200px;height:200px;background:red;position: absolute;}</style></head><body><div id="div1"></div><script type="text/javascript">            window.onload=function(){            new Drag('div1');            }            function Drag(id){            this.posX=0;               this.posY=0;               var _this=this;               this.oDiv=document.getElementById(id);               this.oDiv.onmousedown=function(ev){               _this.fnDw(ev);               }            }           Drag.prototype.fnDw=function(ev){                  var _this=this;               var oEvent=ev||event;                              this.posX=oEvent.clientX-this.oDiv.offsetLeft;               this.posY=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;                              this.oDiv.style.left=oEvent.clientX-this.posX+'px';               this.oDiv.style.top=oEvent.clientY-this.posY+'px';               }            Drag.prototype.fnUp=function(){               document.onmousemove=null;               document.onmouseup=null;               }</script></body></html>

在这里其实很简单，只要将变量抽象出来作为属性，放在构造函数里面，在将原本的函数作为原型方法就可以了

跟着我们再来看看，继承的拖拽吧

<!DOCTYPE html><html><head>    <meta charset="utf-8"/><title></title><style type="text/css">          #div1{width: 200px;height:200px;background:red;position: absolute;}           #div2{width: 200px;height:200px;background:blue;position: absolute;}</style></head><body><div id="div1"></div>      <div id="div2"></div><script type="text/javascript">            window.onload=function(){            new Drag('div1');               new LimitDrag('div2');            }            function Drag(id){            this.posX=0;               this.posY=0;               var _this=this;               this.oDiv=document.getElementById(id);               this.oDiv.onmousedown=function(ev){               _this.fnDw(ev);               }            }           Drag.prototype.fnDw=function(ev){                  var _this=this;               var oEvent=ev||event;                              this.posX=oEvent.clientX-this.oDiv.offsetLeft;               this.posY=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;                              this.oDiv.style.left=oEvent.clientX-this.posX+'px';               this.oDiv.style.top=oEvent.clientY-this.posY+'px';               }            Drag.prototype.fnUp=function(){               document.onmousemove=null;               document.onmouseup=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.posX;               var t=oEvent.clientY-this.posY;               if(l<0){                  l=0;               }else 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";             }</script></body></html>

在这里，我们通过继承的方式实现了LimitDrag对象，仅仅简单的对其做了左右的限制，还为完善····

0 0