js實作回放拖曳軌跡從過程上進行分析_javascript技巧

今天有點小高興，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（）方法：刪除並傳回陣列的最後一個元素，關鍵點有兩個，其一：傳回最後一個元素；其二：刪除元素，陣列長度變小；

這樣我們實現了倒著回放，實現原理就不用多說了吧，如果要是正著回放，我們是不是就要獲取並刪除數組的第一個值了，哈，試著動手寫寫看吧。

不得不說還是用滑鼠拖起來舒服，鍵盤移動太不方便了，用滑鼠可以肆無忌憚的拖曳啊.....天已入伏，要熱，今天倒還好....