拖曳網頁物件

範例

簡介：
本單元將介紹網頁物件的定位、移動與拖曳的操作方式，知道了這些功能網頁就可以有機會如視窗程式一樣安排物件位置，並與使用者互動，這是使用客戶端JavaScript程式直接設計網頁遊戲的基礎。

可以定位的物件：
網頁物件基本上類似文字檔案只能以行來定位，如果要如視窗程式一樣放在特定位置，須使用樣式表的定位(Position)功能。首先請開啟一個HTML網頁，加入一個 div (圖層)物件，進入樣式表(Style)屬性視窗，定義其「位置」如下：

重點是 position 必須選 absolute 就是絕對位置，之後就可以用 px (像素)單位設定 left 與 top 的值，如一般視窗程式一樣，將物件顯示在指定位置！當然這樣的 div 物件預設是透明的，請到上面視窗設定「背景」為某一顏色：

當然也可以加上一個框線增加識別度，solid 表示實線，這是最常用的選項。

執行測試網頁畫面如下，就是一個黃色方塊顯示於(100,100)的位置：

用鍵盤移動物件的程式
接下來我們要寫個小程式用鍵盤的上下左右按鍵移動上面的 div 物件，請先為它取個名字，id設為「R」。接著在原始檔的head區塊建立JavaScript程式如下：

然後在 body 標籤中加入 onkeydown 時執行此程式：

執行網頁你應該可以用上下左右鍵移動這個方塊了！event就是事件，event.keyCode表示鍵盤事件中按下鍵盤的號碼，37是左鍵，依此類推。
請注意：這是在網頁上使用鍵盤程式的標準方式！如果你不知道某個按鍵的鍵盤碼，只需要在kd副程式中加入一行程式：alert(event.keyCode)就會知道了！小心 keyCode 中的 'C' 是大寫的哦！

拖曳物件的程式
上面的程式範例已經告訴我們如何移動一個物件，接下來試試看如何製作一個可以用滑鼠拖曳一張圖片的程式。首先請依照上面製作div物件的方式，將下圖設為div的背景，寬110px，高75px，id設為「horse」：

接著在body與此div物件的原始碼中加入事件副程式的宣告如下：

再到 head區塊的Script標籤內建立 md ,mv與mup三個副程式，就是此物件的 MouseDown 、 MouseMove與MouseUp事件了！

說明：
1.drag是用來標示物件是否拖曳中的指標變數，drag=false表示沒有拖曳物件，true表示有。
2.K是被拖物件的變數，這表示這個程式可以給多個不同物件使用
3.Kx, Ky是物件的起點座標，x0,y0是滑鼠按下開始拖曳時的起點座標。
4.md發生時先設定開始拖曳，然後取得被拖曳的物件參考為K，並紀錄此時物件與滑鼠的座標。
5.滑鼠移動時先檢查是否為拖曳狀態，如果是！物件的新位置就是物件起點加上滑鼠自起點的移動的距離。
6.滑鼠放開時解除拖曳的狀態。
7.在此使用drag是必須的，否則任何時候移動滑鼠做別的事情，物件都會亂動。

在此有點奇怪的是我們將MouseMove與MouseUp事件寫到 body 標籤中，而不是被拖曳的div物件。原因是網頁程式的反應速度不夠快，拖曳物件時常常物件的移動會跟不上滑鼠。此時如果MouseMove事件是定義在被拖曳物件中，拖曳就停止了！這不是我們希望的狀況，所以將事件定義在body，也就是網頁範圍，要不要繼續移動是用drag決定，而不是滑鼠有沒有位於物件上面。要讓網頁物件的拖曳動作順暢，這是一定要的！

試試看！你可以在網頁上多加幾個與上述div物件類似的物件，每一個都可以被自由拖曳，但是如果希望被拖的物件都被提到上層，可以使用 K.style.zIndex="n"的語法調整上下層次，n是一個大於等於零的整數，數字越大表示越上層，被拖一時讓此屬性大一點，放掉時回到零或一即可。