Javascript 如何?對象的拖動？自閃吧)

　　Javascript 如何?對象的拖動？
解決思路
    這個效果並不算常見，通常用於遊戲或個人網站中。因為拖曳是靠滑鼠來操作的，所以對滑鼠的位置的捕獲是問題的重點，然後才是根據滑鼠的位置設定層的位置。
具體步驟：
1.在對象(層)上按下滑鼠時，先捕獲到需要拖曳的對象，然後擷取或設定該對象的相關屬性。

obj=event.srcElement
obj.setCapture()
z=obj.style.zIndex
obj.style.zIndex=100
x=event.offsetX
y=event.offsetY
down=true

2.開始拖曳時，捕獲滑鼠當前位置，並根據該數值設定被拖曳對象的位置。

obj.style.posLeft=document.body.scrollLeft+event.x-x
obj.style.posTop=document.body.scrollTop+event.y-y

3.拖曳完鬆開滑鼠後，重設標誌 down ，還原對象的 z-index並釋放對它的滑鼠捕捉。

down=false 
obj.style.zIndex=z 
obj.releaseCapture()

4.完整代碼。

<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(){
//判斷滑鼠已被按下且onmouseover和onmousedown事件發生在同一對象上
 if(down&&event.srcElement==obj){
   with(obj.style){
/*設定對象的X座標值為文檔在X軸方向上的滾動距離加上當前滑鼠指標相當於文檔對象的X座標值減滑鼠按下時指標位置相對於觸發事件的對象的X座標*/

        posLeft=document.body.scrollLeft+event.x-x
/*設定對象的Y座標值為文檔在Y軸方向上的滾動距離加上當前滑鼠指標相當於文檔對象的Y座標值減滑鼠按下時指標位置相對於觸發事件的對象的Y座標*/
        posTop=document.body.scrollTop+event.y-y
   }
 }
}

function stopdrag(){
//onmouseup事件觸發時說明滑鼠已經鬆開，所以設定down變數值為false
down=false 
obj.style.zIndex=z       //還原對象的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>

注意：只有 CSS 的 position 屬性值為 absolute 的對象才能進行拖動操作。
提示：如果需要將拖曳組件化，可以參考第二部分HTC一節。
技巧：可以在 init() 函數中加一句 event.cancelBubble=true ，以取消在該對象上的事件冒泡。
試一試：讀者可以試著實現移動其他對象，例如移動一個圖片或文字框。
特別提示
在拖曳對象前必須確保該對象的為絕對位置的，把上面的完整代碼儲存就可以看到效果了，在實際就用時務必在對象上加上 onmousedown、onmousemove和onmouseup三個事件並觸發相應函數。代碼運行效果 3.8 所示。

圖 3.8 可拖動的層
特別說明

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