js實(shí)現(xiàn)回放拖拽軌跡從過程上進(jìn)行分析

更新時(shí)間：2014年06月26日 10:19:03 投稿：whsnow

今天的記錄，記錄回放拖拽痕跡，先從過程上進(jìn)行分析,需要的朋友可以參考下

今天有點(diǎn)小高興，csdn博客瀏覽量過萬了，在過去還從來沒有過這么高的瀏覽量呢，不得不說，太多時(shí)候還是有些矯情，可看到這些鼓勵(lì)還是忍不住高興啊，至少，這樣讓我有一種行內(nèi)人員的感覺，吾道不孤啊。

閑話不多說，繼續(xù)今天的記錄，記錄回放拖拽痕跡，先從過程上進(jìn)行分析：

1、要實(shí)現(xiàn)回放拖拽痕跡，則必須先有記錄；

2、要記錄拖拽痕跡，則必須要實(shí)現(xiàn)拖拽；

這個(gè)問題前幾天曾經(jīng)做到過，當(dāng)時(shí)實(shí)現(xiàn)的也略有瑕疵，但大致的實(shí)現(xiàn)方法已經(jīng)了然于胸，所以今天在實(shí)現(xiàn)這個(gè)問題的時(shí)候速度快了不少，著實(shí)高興了一番，今天再實(shí)現(xiàn)了一遍之后理解上又深了一點(diǎn)，那就今天再來記錄下；

至于記錄拖拽痕跡，這個(gè)分析就來長話短說，畢竟做過一次了：

1、確定現(xiàn)在div的位置和狀態(tài)，保證absolute才能實(shí)現(xiàn)拖動(dòng)；

2、監(jiān)聽鼠標(biāo)拖動(dòng)事件(昨天總結(jié)的幾種鼠標(biāo)事件)；

3、根據(jù)相應(yīng)的鼠標(biāo)事件，做出相應(yīng)的響應(yīng)，在onmousemove拖拽中記錄div存在過的點(diǎn)；

4、監(jiān)聽鼠標(biāo)彈起事件，來結(jié)束拖拽事件和點(diǎn)的記錄

任然是先來實(shí)現(xiàn)下代碼（這里將所有代碼同時(shí)列出，后面逐一分析）：

html語言：

<div style="width: 50px;height: 50px;background-color: cyan;display: block;position: absolute;" id="showZone"></div>//這個(gè)還是那么熟悉啊 
<a href="#" style="position: absolute;margin-top: 100px;color: yellow;background-color: red;">reback</a>//這個(gè)是來回放的

javascript部分：

window.onload=function(){ 
var obj=document.getElementById("showZone"); 
var disX=disY=0; 
var dragIf=false; 
var position=[{x:obj.offsetLeft,y:obj.offsetTop}];//這個(gè)是實(shí)現(xiàn)記錄和回放的關(guān)鍵，其它都是基本元素的獲取 
var oa=document.getElementsByTagName("a")[0]; 

obj.onmousedown=function(event){ 
var event=event||window.event; 
disX=event.clientX-obj.offsetLeft;//鼠標(biāo)相對(duì)于div邊框的距離 
disY=event.clientY-obj.offsetTop; 
dragIf=true;//可以進(jìn)行拖拽的標(biāo)志 

position.push({x:obj.offsetLeft,y:obj.offsetTop});//記錄從這時(shí)候就開始了 
return false; 
}; 
document.onmousemove=function(event){ 

if(!dragIf)return;//這個(gè)判斷極為重要，只有按下的移動(dòng)才有效 
var event=event||window.event; 
var nowX=event.clientX-disX;//根據(jù)上面記錄的鼠標(biāo)相對(duì)div的距離就知道div相對(duì)網(wǎng)頁的距離了吧 
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;//不允許再進(jìn)行拖拽和記錄了 
obj.innerHTML="X:"+obj.offsetLeft+"Y:"+obj.offsetTop; 
}; 
oa.onclick = function (){ 
if (position.length == 1) return;//只有一個(gè)的時(shí)候，說明并未移動(dòng) 
var timer = setInterval(function (){ 
var oPos = position.pop(); 
oPos ? (obj.style.left = oPos.x + "px", obj.style.top = oPos.y + "px") : clearInterval(timer);//又被這個(gè)寫法驚艷到 
}, 30); 
return false; 
}; 
};

需要注意的關(guān)鍵點(diǎn)，簡(jiǎn)要說幾個(gè)：

1、var position數(shù)組，點(diǎn)的集合：這個(gè)點(diǎn)，是以div的左上角的移動(dòng)點(diǎn)，也就是說我們記錄的移動(dòng)軌跡實(shí)際上就是div左上角的點(diǎn)的集合，offsetLeft為x坐標(biāo)，offsetTop為y坐標(biāo)，這個(gè)坐標(biāo)軸你知道怎么畫不；

2、程序中出現(xiàn)的幾個(gè)長度或距離：offsetLeft、clientX、offsetWidth、style.left和document.documentElement.clientWidth等等;

3、push（）方法：向數(shù)組末尾添加元素，改變數(shù)組長度，末尾哦；

4、pop（）方法：刪除并返回?cái)?shù)組的最后一個(gè)元素，關(guān)鍵點(diǎn)有兩個(gè)，其一：返回最后一個(gè)元素；其二：刪除元素，數(shù)組長度變??；

這樣我們實(shí)現(xiàn)了倒著回放，實(shí)現(xiàn)原理就不用多說了吧，如果要是正著回放，我們是不是就要獲取并刪除數(shù)組的第一個(gè)值了，哈，試著動(dòng)手寫寫看吧。

不得不說還是用鼠標(biāo)拖起來舒服，鍵盤移動(dòng)太不方便了，用鼠標(biāo)可以肆無忌憚的拖拽啊.....天已入伏，要熱，今天倒還好....

您可能感興趣的文章: