分别用普通过程，面向对象过程，和继承方法实现拖拽效果_1、分别使用对象冒充继承和动态混合继承方式实现面向对象拖拽效果-优快云博客

本文链接：https://blog.youkuaiyun.com/xpf_show/article/details/38746645

本文详细介绍了如何将一个基于过程的JavaScript拖拽示例转换为面向对象编码模式，并进一步展示了如何利用继承来扩展功能，具体包括变量抽象、原型方法的使用以及左右限制的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们在这里先写一个正常逻辑下，一个面向过程的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对象，仅仅简单的对其做了左右的限制，还为完善····