今天有點小高興，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="#" 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（）方法：刪除並返回數組的最後一個元素，關鍵點有兩個，其一：返回最後一個元素；其二：刪除元素，數組長度變小；
這樣我們實現了倒著回放，實現原理就不用多說了吧，如果要是正著回放，我們是不是就要獲取並刪除數組的第一個值了，哈，試著動手寫寫看吧。
不得不說還是用鼠標拖起來舒服，鍵盤移動太不方便了，用鼠標可以肆無忌憚的拖拽啊.....天已入伏，要熱，今天倒還好....