js实现回放拖拽轨迹从过程上进行分析
今天有点小高兴，csdn博客浏览量过万了，在过去还从来没有过这么高的浏览量呢，不得不说，太多时候还是有些矫情，可看到这些鼓励还是忍不住高兴啊，至少，这样让我有一种行内人员的感觉，吾道不孤啊。
闲话不多说，继续今天的记录，记录回放拖拽痕迹，先从过程上进行分析：
1、要实现回放拖拽痕迹，则必须先有记录；
2、要记录拖拽痕迹，则必须要实现拖拽；
这个问题前几天曾经做到过，当时实现的也略有瑕疵，但大致的实现方法已经了然于胸，所以今天在实现这个问题的时候速度快了不少，着实高兴了一番，今天再实现了一遍之后理解上又深了一点，那就今天再来记录下；
至于记录拖拽痕迹，这个分析就来长话短说，毕竟做过一次了：
1、确定现在div的位置和状态，保证absolute才能实现拖动；
2、监听鼠标拖动事件(昨天总结的几种鼠标事件)；
3、根据相应的鼠标事件，做出相应的响应，在onmousemove拖拽中记录div存在过的点；
4、监听鼠标弹起事件，来结束拖拽事件和点的记录
任然是先来实现下代码（这里将所有代码同时列出，后面逐一分析）：
html语言：
<divstyle="width:50px;height:50px;background-color:cyan;display:block;position:absolute;"id="showZone"></div>//这个还是那么熟悉啊 <ahref="#"style="position:absolute;margin-top:100px;color:yellow;background-color:red;">reback</a>//这个是来回放的
javascript部分：
window.onload=function(){
varobj=document.getElementById("showZone");
vardisX=disY=0;
vardragIf=false;
varposition=[{x:obj.offsetLeft,y:obj.offsetTop}];//这个是实现记录和回放的关键，其它都是基本元素的获取
varoa=document.getElementsByTagName("a")[0];
obj.onmousedown=function(event){
varevent=event||window.event;
disX=event.clientX-obj.offsetLeft;//鼠标相对于div边框的距离
disY=event.clientY-obj.offsetTop;
dragIf=true;//可以进行拖拽的标志
position.push({x:obj.offsetLeft,y:obj.offsetTop});//记录从这时候就开始了
returnfalse;
};
document.onmousemove=function(event){
if(!dragIf)return;//这个判断极为重要，只有按下的移动才有效
varevent=event||window.event;
varnowX=event.clientX-disX;//根据上面记录的鼠标相对div的距离就知道div相对网页的距离了吧
varnowY=event.clientY-disY;
varmaxX=document.documentElement.clientWidth-obj.offsetWidth;//这里是offsetWidth，是div的宽度，不是offsetLeft
varmaxY=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;//直观的看到变化
returnfalse;
};
document.onmouseup=function(){
dragIf=false;//不允许再进行拖拽和记录了
obj.innerHTML="X:"+obj.offsetLeft+"Y:"+obj.offsetTop;
};
oa.onclick=function(){
if(position.length==1)return;//只有一个的时候，说明并未移动
vartimer=setInterval(function(){
varoPos=position.pop();
oPos?(obj.style.left=oPos.x+"px",obj.style.top=oPos.y+"px"):clearInterval(timer);//又被这个写法惊艳到
},30);
returnfalse;
};
};
需要注意的关键点，简要说几个：
1、varposition数组，点的集合：这个点，是以div的左上角的移动点，也就是说我们记录的移动轨迹实际上就是div左上角的点的集合，offsetLeft为x坐标，offsetTop为y坐标，这个坐标轴你知道怎么画不；
2、程序中出现的几个长度或距离：offsetLeft、clientX、offsetWidth、style.left和document.documentElement.clientWidth等等;
3、push（）方法：向数组末尾添加元素，改变数组长度，末尾哦；
4、pop（）方法：删除并返回数组的最后一个元素，关键点有两个，其一：返回最后一个元素；其二：删除元素，数组长度变小；
这样我们实现了倒着回放，实现原理就不用多说了吧，如果要是正着回放，我们是不是就要获取并删除数组的第一个值了，哈，试着动手写写看吧。
不得不说还是用鼠标拖起来舒服，键盘移动太不方便了，用鼠标可以肆无忌惮的拖拽啊.....天已入伏，要热，今天倒还好....