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

最新推荐文章于 2020-05-21 20:48:17 发布

壹间show

最新推荐文章于 2020-05-21 20:48:17 发布

阅读量753

点赞数

分类专栏： demo 浅谈javascript javascript实例前端杂文文章标签：面向对象继承 javascript拖拽

本文链接：https://blog.csdn.net/xpf_show/article/details/38746645

版权

前端杂文同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

浅谈javascript

19 篇文章 0 订阅

订阅专栏

demo

12 篇文章 0 订阅

订阅专栏

首先我们在这里先写一个正常逻辑下，一个面向过程的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.οnlοad=function(){
               var oDiv=document.getElementsByTagName('div')[0];
               oDiv.οnmοusedοwn=function(e){
               	var ev=e||event;
               	var posX=ev.clientX-oDiv.offsetLeft;
               	var posY=ev.clientY-oDiv.offsetTop;
               	document.οnmοusemοve=function(ev){
               		var oEvent=ev||event;
               		oDiv.style.left=oEvent.clientX-posX+'px';
               		oDiv.style.top=oEvent.clientY-posY+'px';
               	};
               	document.οnmοuseup=function(){
               		document.οnmοusemοve=null;
               		document.οnmοuseup=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.οnlοad=function(){
            	new Drag('div1');
            }

            function Drag(id){
            	this.posX=0;
               this.posY=0;
               var _this=this;
               this.oDiv=document.getElementById(id);
               this.oDiv.οnmοusedοwn=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.οnmοusemοve=function(ev){
                    _this.fnMove(ev);}
                  document.οnmοuseup=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.οnmοusemοve=null;
               		document.οnmοuseup=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.οnlοad=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.οnmοusedοwn=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.οnmοusemοve=function(ev){
                    _this.fnMove(ev);}
                  document.οnmοuseup=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.οnmοusemοve=null;
               		document.οnmοuseup=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对象，仅仅简单的对其做了左右的限制，还为完善····