JS----拖拽图层，面向过程，面向对象

最新推荐文章于 2021-12-01 21:24:24 发布

damys

最新推荐文章于 2021-12-01 21:24:24 发布

阅读量1.3k

点赞数

分类专栏： JScript.Jquery 文章标签： js拖拽拖拽插件 js拖拽插件

本文链接：https://blog.csdn.net/damys/article/details/48266453

版权

JScript.Jquery 专栏收录该内容

81 篇文章 0 订阅

订阅专栏

拖拽可以是图层也可以是图片

面向过程--升级到->面向对象

1. 直接调用：Drag插件,

2. 对Drag的插件进行扩展：LimitDrag插件，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽效果由过程向OOP转</title>
<style>
	*{ margin:0; padding:0;}
	#div1{ width:100px; height:100px; background:#888; position:absolute;}
	#div2{ width:80px; height:80px; background:#66C; position:absolute;}
</style>
</head>

<body>
<!--V0.1 面向过程的写法-->
<script>
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		
		oDiv.onmousedown = function(ev){
			var oEvent = ev || event;		//兼容代码
			var disX = oEvent.clientX - oDiv.offsetLeft;	//offsetLeft: 为元素离左侧的距离
			var disY = oEvent.clientY - oDiv.offsetTop;
			
			
			document.onmousemove = function(ev){
				var oEvent = ev || event;
				oDiv.style.left = oEvent.clientX-disX+'px';		//是原来的基础上增加或减少
				oDiv.style.top  = oEvent.clientY-disY+'px';
				
			}
			
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			}
				
		}
	}
</script>

<!--V1.0 过渡OOP, 就是把所有方法抽取出来，单独存在-->
<script>
	var oDiv = null;
	var disX = 0;
	var disY = 0;

	window.onload = function(){
		oDiv = document.getElementById('div1');
		oDiv.onmousedown = fnDown;
	}
	
	function fnDown(ev){
		var oEvent = ev || event;		//兼容代码
		disX = oEvent.clientX - oDiv.offsetLeft;	//offsetLeft: 为元素离左侧的距离
		disY = oEvent.clientY - oDiv.offsetTop;
		
		document.onmousemove = fnMove;
		document.onmouseup = fnUp;
	}
	
	function fnMove(ev){
		var oEvent = ev || event;
		oDiv.style.left = oEvent.clientX-disX+'px';		//是原来的基础上增加或减少
		oDiv.style.top  = oEvent.clientY-disY+'px';	
	}
			
	function fnUp(){
		document.onmousemove = null;
		document.onmouseup = null;
	}
</script>

<!--V2.0 纯OOP-->
<script>
	function Drag(id){
		var _this=this;
		this.disX=0;
		this.dixY=0;		
		
		this.oDiv = document.getElementById(id);
		this.oDiv.onmousedown = function(ev){
			_this.fnDown(ev);
			return false;
		}
	}
	
	
	Drag.prototype.fnDown = function(ev){
		var _this = this;
		var oEvent = ev || event;
		
		this.disX = oEvent.clientX - this.oDiv.offsetLeft;
		this.disY = 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.disX+'px';
		this.oDiv.style.top  = oEvent.clientY-this.disY+'px';
	}
	
	Drag.prototype.fnUp = function(){
		document.onmousemove = null;
		document.onmouseup = null;
	}
</script>
<script>
	window.onload = function(){
		new Drag('div1');
	}
</script>

<!--扩展，继承 限制左右范围-->
<script>
	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.disX;
		var t = oEvent.clientY-this.disY;

		if(l<0)		//对左右范围限制
			l=0;
		else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth)
			l = document.documentElement.clientWidth-this.oDiv.offsetWidth;
			
		if(t<0)		//对上下范围限制
			t=0;
		else if(t>document.documentElement.clientHeight-this.oDiv.offsetHeight)
			t = document.documentElement.clientHeight-this.oDiv.offsetHeight;
		
		this.oDiv.style.left = l+'px';
		this.oDiv.style.top  = t+'px';
	}
</script>
<script>
	window.onload = function(){
		new LimitDrag('div2');
	}
</script>

<div id="div1">div1-Drag</div>
<div id="div2">div2-LimitDrag</div>
</body>
</html>

damys

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS----拖拽图层，面向过程，面向对象

拖拽可以是图层也可以是图片面向过程--升级到->面向对象1. 直接调用：Drag插件, 2. 对Drag的插件进行扩展：LimitDrag插件，拖拽效果由过程向OOP转 *{ margin:0; padding:0;} #div1{ width:100px; height:100px; background:#888; position:absol
复制链接

扫一扫