簡單拖動效果

<script> 
var x,y,z,down=false,obj    
function init()
{ 
    obj=event.srcElement     //事件觸發對象 
    obj.setCapture()            //設置屬於當前對象的鼠標捕捉 
    z=obj.style.zIndex          //獲取對象的z軸座標值 
    //設置對象的z軸座標值爲100，確保當前層顯示在最前面 
    obj.style.zIndex=100 
    x=event.offsetX   //獲取鼠標指針位置相對於觸發事件的對象的X座標 
    y=event.offsetY   //獲取鼠標指針位置相對於觸發事件的對象的Y座標 
    down=true         //布爾值，判斷鼠標是否已按下，true爲按下，false爲未按下 
} 

function moveit(){ 
 if(down&&event.srcElement==obj){ 
   with(obj.style)
   { 
       posLeft=document.body.scrollLeft+event.x-x 
        posTop=document.body.scrollTop+event.y-y 
   } 
 } 
} 

function stopdrag()
{ 
    down=false  
    obj.style.zIndex=z      
    obj.releaseCapture() 
} 
</script> 

<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:20;top:190;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">Layer 1</div> 
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2</div> 
<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:100;top:90;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div> 

<!--

本例需要掌握的技巧比較多，捕捉鼠標，獲取鼠標位置(相當於對象)，釋放鼠標捕捉，文檔的滾動距離還有with 語句。 
1.       setCapture() 設置屬於當前文檔的對象的鼠標捕捉。 
2.       event.offsetX 設置或獲取鼠標指針位置相對於觸發事件的對象的 x 座標。 
3.       event.offsetY 設置或獲取鼠標指針位置相對於觸發事件的對象的 y 座標。 
4.       releaseCapture() 釋放當前文檔中對象的鼠標捕捉。 
5.       scrollLeft 設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離。 
6.       scrollTop 設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離。 
7.       with 爲一個或多個語句設定默認對象。 

-->