div 拖拽构造函数封装

最新推荐文章于 2023-11-30 08:39:27 发布

郭浩326

最新推荐文章于 2023-11-30 08:39:27 发布

阅读量257

点赞数

分类专栏： html javascript

本文链接：https://blog.csdn.net/guohao326/article/details/87936052

版权

javascript 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<title>拖拽封装</title>
        <style>
			*{
				padding: 0;
				margin: 0;
			}
            div {
                position: absolute;
            }
        </style>            
    </head>

	<body>
		<div id="box1" style="height: 100px; width: 100px; background: blue;"></div>
		<div id="box2" style="top: 200px;height: 50px; width: 50px; background:pink;"></div>

	</body>
	 <script>
		 function Drag(id){
			 this.oBox = document.getElementById(id);
			 this.disX = 0;
			 this.disY = 0;
			 var _this = this;
			 
			 this.oBox.onmousedown = function(){
				
				 _this.fnDown();
			 }
			 
		 }
		 Drag.prototype.fnDown = function(ev){
			var oEvent = ev || event;
			this.disX = oEvent.clientX - this.oBox.offsetLeft;
			this.disY = oEvent.clientY - this.oBox.offsetTop;
			var _this = this;
			document.onmousemove = function(){
				_this.fnMove();
			};
			
			document.onmouseup = function(){
				_this.fnUp();
			};
		 }
		 
		 Drag.prototype.fnMove = function(ev){
			 var oEvent = ev || event;
			 this.oBox.style.left = oEvent.clientX - this.disX + "px";
			 this.oBox.style.top = oEvent.clientY - this.disY + "px";
		 }
		 
		 Drag.prototype.fnUp = function(){
			 document.onmousemove = null;
			 document.onmouseup = null;
		 }
		 /* 更多功能拓展 */
		  function DragLimit(id){
			  Drag.call(this,id);
		  }
		  /* 	继承 现有的方法	*/
		  for (var i in Drag.prototype) {
		  	DragLimit.prototype[i] = Drag.prototype[i];
		  }
		  
		  /*	覆盖现有的方法 进行扩展	*/
		  DragLimit.prototype.fnMove = function(ev){
			 var oEvent = ev || event;
			 
			 var left = oEvent.clientX - this.disX;
			 var top = oEvent.clientY - this.disY;
			 //控制边界
			if(left < 0){
				left = 0;
			}else if(left > document.documentElement.clientWidth-this.oBox.offsetWidth){
				left = document.documentElement.clientWidth-this.oBox.offsetWidth;
			}
			 
			if(top <= 0){
				top = 0;
			} else if(top > document.documentElement.clientHeight-this.oBox.offsetHeight){
				top = document.documentElement.clientHeight-this.oBox.offsetHeight;
			}

			this.oBox.style.left = left + 'px';
			this.oBox.style.top = top + 'px'; 
		  }
		  
		  
		 /*	调用方法	*/ 
		new Drag("box1");
		new DragLimit("box2")
		
	</script>
</html>

郭浩326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div 拖拽构造函数封装

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;拖拽封装&lt;/title&gt; &lt;style&gt; *{ padding: 0; margin: 0; }
复制链接

扫一扫