完美拖拽

最新推荐文章于 2021-03-09 20:40:27 发布

秃头男神

最新推荐文章于 2021-03-09 20:40:27 发布

阅读量192

点赞数

分类专栏： javascript经典案例

本文链接：https://blog.csdn.net/weixin_45896126/article/details/109233431

版权

javascript经典案例专栏收录该内容

42 篇文章 1 订阅

订阅专栏

技术点：
设置一个数组positionList用来保存拖拽时产生的轨迹保存以及使用的原理是什么
移动事件是设置在按下事件里面的
保存拖拽时间生成的轨迹
需求分析:
1 在tz上按下鼠标,整个box可以拖拽
2 在页面中移动鼠标,box跟着移动
3 在页面上松开鼠标,box停止移动
4 点击a1,div会从当前位置沿着原来的路线倒退回去
技术点:
如果想要沿原路径倒退,必须记住原来的途径的点
代码展示“
样式css：

	html,        
	body {            
		overflow: hidden;        
	}        
	body,        
	div,        
	h2,        
	p {            
		margin: 0;            
		padding: 0;        
	}        
	body {            
		color: #fff;            
		background: #000;            
		font: 12px/2 Arial;        
	}                
	p {            
		padding: 0 10px;            
		margin-top: 10px;        
	}        
	span {            
		color: #ff0;            
		padding-left: 5px;        
	}        
	#box {            
		position: absolute;            
		width: 300px;            
		height: 150px;            
		background: #333;            
		border: 2px solid #ccc;            
		top: 50%;            
		left: 50%;            
		margin: -75px 0 0 -150px;        
	}                
	#box h2 {            
		height: 25px;            
		cursor: move;            
		background: #222;            
		border-bottom: 2px solid #ccc;            
		text-align: right;            
		padding: 0 10px;        
	}        
	#box h2 a {            
		color: #fff;            
		font: 12px/25px Arial;            
		text-decoration: none;            
		outline: none;        
	}

样式div

	<body>    
		<div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">        
			<h2 id="tz"><a href="javascript:;" id="a1">点击回放拖动轨迹</a></h2>        	
			<p><strong>Drag:</strong><span>false</span></p>        
			<p><strong>offsetTop:</strong><span>231</span></p>        
			<p><strong>offsetLeft:</strong><span>533</span></p>    
		</div>
	</body>

javascript调用事件

	<script>        
		var tz = document.getElementById("tz");//获取拖拽元素    
		var box = document.getElementById("box");    
		var a1 = document.getElementById("a1");//回放标签    
		var positionList = [];//用于保存拖拽时产生的轨迹    
		//按下tz    
		//移动box    
		tz.onmousedown = function(eve){//按下产生事件对象        
			var e = eve || event;        
			//获取初始值，以此为基础进行计算        
			var x = e.offsetX;        
			var y = e.offsetY;        
			document.onmousemove = function(eve){            
				var e = eve || event;            
				var l = e.pageX - x;            
				var t = e.pageY - y;                        
				box.style.left = l + "px";            
				box.style.top = t + "px";                        /
				/拖拽时间生的轨迹要保存下来，给点击回放时使用            
				//如何保存轨迹            
				//设置数据结构：重要，怎样设计后面才能更好的使用            
				//[{left:23,top:45},{left:45,top:87}]//⭐            
				positionList.push({left:l,top:t});//⭐⭐⭐数组从前往后如此设置                        
				return false;//⭐            
				//到此完成拖拽事件        
			}        
			//松开        
			document.onmouseup = function(){            
				//document.onmousemove = null;            
				this.onmousemove = null;//解除绑定        
			}    
		}        
		a1.onclick = function(){        
			//开始回放        
			//轨迹是什么：是拖拽box时，产生的所有的l和t值        
			//轨迹要用时间间隔来变化，需要使用setInterval        
			//从最后的位置往前赋值        
			//console.log(positionList)        
			//如果positionList没有轨迹不需要回放  数组为空，不需要执行轨迹        
			if(positionList.length === 0){            
				return;        
			}        
			//往下是重点逻辑⭐⭐⭐  保存到数组中   取出使用        
			var i = 0;        
			var timer = setInterval(function(){            
				i++;            
				//从positionList的最后一个值往前赋值   调用时从后往前调用            
				box.style.left = positionList[positionList.length-i].left + "px";            
				box.style.top = positionList[positionList.length-i].top + "px";            
				//i不能超过positionList.length   超过就表示越界            
				if(i === positionList.length){                
					//清除定时器                
					clearInterval(timer);                
					//清空数组positionList                
					positionList.length = 0;            
				}        
			},20)            
		}   
	 </script>