首页 > 代码库 > js实现回放拖拽轨迹-------Day48

js实现回放拖拽轨迹-------Day48

今天有点小高兴,csdn博客浏览量过万了,在过去还从来没有过这么高的浏览量呢。不得不说。太多时候还是有些矫情。可看到这些鼓舞还是忍不住高兴啊,至少,这样让我有一种行内人员的感觉,吾道不孤啊。

闲话不多说。继续今天的记录,记录回放拖拽痕迹,先从过程上进行分析:

1、要实现回放拖拽痕迹,则必须先有记录;

2、要记录拖拽痕迹,则必需要实现拖拽。

这个问题前几天以前做到过。当时实现的也略有瑕疵,但大致的实现方法已经了然于胸。所以今天在实现这个问题的时候速度快了不少,着实高兴了一番,今天再实现了一遍之后理解上又深了一点,那就今天再来记录下。

至于记录拖拽痕迹。这个分析就来长话短说。毕竟做过一次了:

1、确定如今div的位置和状态。保证absolute才干实现拖动;

2、监听鼠标拖动事件(昨天总结的几种鼠标事件);

3、依据对应的鼠标事件,做出对应的响应,在onmousemove拖拽中记录div存在过的点;

4、监听鼠标弹起事件。来结束拖拽事件和点的记录

任然是先来实现下代码(这里将全部代码同一时候列出,后面逐一分析):

html语言:

<div style="width: 50px;height: 50px;background-color: cyan;display: block;position: absolute;" id="showZone"></div>//这个还是那么熟悉啊
<a href="http://www.mamicode.com/#" style="position: absolute;margin-top: 100px;color: yellow;background-color: red;">reback</a>//这个是来回放的
javascript部分:

window.onload=function(){
	var obj=document.getElementById("showZone");
	var disX=disY=0;
	var dragIf=false;
	var position=[{x:obj.offsetLeft,y:obj.offsetTop}];//这个是实现记录和回放的关键,其他都是基本元素的获取
	var oa=document.getElementsByTagName("a")[0];
	
	obj.onmousedown=function(event){
		var event=event||window.event;
		disX=event.clientX-obj.offsetLeft;//鼠标相对于div边框的距离
		disY=event.clientY-obj.offsetTop;
		dragIf=true;//能够进行拖拽的标志
		
		position.push({x:obj.offsetLeft,y:obj.offsetTop});//记录从这时候就開始了
		return false;
	};
	document.onmousemove=function(event){
		
		if(!dragIf)return;//这个推断极为重要,仅仅有按下的移动才有效
		var event=event||window.event;
		var nowX=event.clientX-disX;//依据上面记录的鼠标相对div的距离就知道div相对网页的距离了吧
		var nowY=event.clientY-disY;
		var maxX=document.documentElement.clientWidth-obj.offsetWidth;//这里是offsetWidth,是div的宽度。不是offsetLeft
		var maxY=document.documentElement.clientHeight-obj.offsetHeight;
		nowX=nowX<0?0:nowX;//这些判定,仅仅是推断不要出了边界
		nowY=nowY<0?0:nowY;
		nowX=nowX>maxX?maxX:nowX;
		nowY=nowY>maxY?maxY:nowY;
		
		obj.style.marginTop=obj.style.marginLeft=0;
		obj.style.left=nowX+"px";//不要忘记+“px”。仅仅有style.left/top是有“px”的
		obj.style.top=nowY+"px";
		position.push({x:nowX,y:nowY});//不停记录啊
		obj.innerHTML="X:"+nowX+"Y:"+nowY;//直观的看到变化
		return false;
	};
	document.onmouseup=function(){
		dragIf=false;//不同意再进行拖拽和记录了
		obj.innerHTML="X:"+obj.offsetLeft+"Y:"+obj.offsetTop;
	};
	oa.onclick = function (){
		if (position.length == 1) return;//仅仅有一个的时候,说明并未移动
		var timer = setInterval(function (){
			var oPos = position.pop();
			oPos ?

(obj.style.left = oPos.x + "px", obj.style.top = oPos.y + "px") : clearInterval(timer);//又被这个写法惊艳到 }, 30); return false; }; };

须要注意的关键点。简要说几个:

1、var position数组,点的集合:这个点,是以div的左上角的移动点,也就是说我们记录的移动轨迹实际上就是div左上角的点的集合,offsetLeft为x坐标。offsetTop为y坐标,这个坐标轴你知道怎么画不。

2、程序中出现的几个长度或距离:offsetLeft、clientX、offsetWidth、style.left和document.documentElement.clientWidth等等;

3、push()方法:向数组末尾加入元素,改变数组长度。末尾哦;

4、pop()方法:删除并返回数组的最后一个元素。关键点有两个,其一:返回最后一个元素;其二:删除元素,数组长度变小。

这样我们实现了倒着回放,实现原理就不用多说了吧,假设要是正着回放,我们是不是就要获取并删除数组的第一个值了,哈,试着动手写写看吧。


不得不说还是用鼠标拖起来舒服。键盘移动太不方便了,用鼠标能够肆无忌惮的拖拽啊.....天已入伏。要热,今天倒还好....

技术分享




js实现回放拖拽轨迹-------Day48