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

本文详细介绍了如何将一个基于过程的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对象,仅仅简单的对其做了左右的限制,还为完善····

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值