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="#" 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（）方法：删除并傳回數組的最後一個元素。關鍵點有兩個，其一：傳回最後一個元素；其二：删除元素，數組長度變小。

這樣我們實作了倒着回放，實作原理就不用多說了吧，假設要是正着回放，我們是不是就要擷取并删除數組的第一個值了，哈，試着動手寫寫看吧。

不得不說還是用滑鼠拖起來舒服。鍵盤移動太不友善了，用滑鼠能夠肆無忌憚的拖拽啊.....天已入伏。要熱，今天倒還好....