js实现回放拖拽轨迹从过程上进行分析_javascript技巧

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

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

2、要记录拖拽痕迹，则必须要实现拖拽；

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

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

1、确定现在div的位置和状态，保证absolute才能实现拖动；

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

3、根据相应的鼠标事件，做出相应的响应，在onmousemove拖拽中记录div存在过的点；

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

任然是先来实现下代码（这里将所有代码同时列出，后面逐一分析）：

html语言：

//这个还是那么熟悉啊 
reback//这个是来回放的

javascript部分：

需要注意的关键点，简要说几个：

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

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

3、push（）方法：向数组末尾添加元素，改变数组长度，末尾哦；

4、pop（）方法：删除并返回数组的最后一个元素，关键点有两个，其一：返回最后一个元素；其二：删除元素，数组长度变小；

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

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