<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>//這個是來回放的

window.onload=function(){ 
var obj=document.getElementById("showZone"); 
var disX=disY=0; 
var dragIf=false; 
var position=[{x:obj.offsetLeft,y:obj.offsetTop}];//這個是實現(xiàn)記錄和回放的關(guān)鍵，其它都是基本元素的獲取 
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;//根據(jù)上面記錄的鼠標相對div的距離就知道div相對網(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;//不允許再進行拖拽和記錄了 
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; 
}; 
};