在先前某個系統測試的時候，有一個測試人員提到她們一個自認為是的bug：在ie瀏覽器上，拖動系統某個頁面上的某個圖片對象到頁面邊緣的某個位置，會出現該圖片的單獨顯示頁面。
看到這個bug描述時，測試了一下，發現還真有那么回事，看看別人寫的那段代碼，似乎有沒有什么問題，其實就是一個簡單的img對象而已，后來查了一下，才豁然明白，原來早從IE4.0開始，網頁上的圖像和文本這兩個對象可以初始化系統拖放。在后續的IE版本中，拖放功能愈發強大，幾乎頁面上的所有內容都能拖動。真是才疏學淺呢！可笑的是，搞web一年有余后，才知道這個東東，真是不善於觀察啊。
在朋友的推薦下，買了《JavaScript高級程序設計》這本書，今天偶然翻到一章，居然是“拖放”，該章系統講了拖放事件，我也跟着學了學。下面是記錄下來的學習過程。
一． 拖放初探
有兩種使用JavaScript的方法來實現拖放功能，即系統拖放和模擬拖放。
微軟為IE提供的拖放事件有兩類，其中一類在被拖動的項上觸發，還有一些在放置目標上觸發，分別包含如下事件：
1． 拖放項事件
dragstart： 當鼠標按下按鈕，開始移動鼠標時觸發；
drag：在dragstart事件觸發后，只要對象還是被移動，一直觸發該事件；
dragend：在拖動停止時觸發。
2． 放置目標事件
dragenter：當對象被放置到有效的放置目標上時觸發，類似於mouseover；
dragover：當dragenter發生后，當被拖動的項在放置目標的邊界內時，將一直觸發該事件；
dragleave：當dragover停止觸發，項被拖出放置目標時，觸發該事件，類似於mouseout；
drop：如果被拖動的項正是在這個目標上放下的，則會觸發drop事件而不是dragleave事件。
為了學習這兩種類型的事件，讓我們來看一個綜合的例子。代碼如下：
<html> <head> <title>拖動測試</title> <script type="text/javascript"> function handleDropEvent(oEvent) { var textBox = document.getElementById("txt1"); textBox.value = oEvent.type + "\n"; } </script> <head> <body> <form> <p> <img src="amigo.jpg" ondragstart="handleDropEvent(event)" ondrag="handleDropEvent(event)" ondragend="handleDropEvent(event)" /> </p> <p> <input type="text" value="拖動這個文本" ondragenter="handleDropEvent(event)" ondragover="handleDropEvent(event)" ondragleave="handleDropEvent(event)" ondrop="handleDropEvent(event)" /> </p> <p> <input type="text" name="txt1" id="txt1" readonly="true"/> </p> </form> </body> </html>
因這個例子比較簡單，在瀏覽器中運行一下就可以看到結果，在此不贅述。
二．拖放進階
當嘗試將一些文本或圖像拖放到無效的對象上時，會看到一個特別的鼠標形狀，即圓圈中有條線，表示的是該位置不能放置。盡管所有的元素都支持放置目標的事件，但默認情況下它們的行為是不允許放置的，例如div。若想將<div/>變成有效的放置對象，必須覆蓋默認的dragenter和dragover行為，因為這些是特定於IE的，所以可直接將oEvent.returnValue特性設置為false，實例代碼入下：
<html> <head> <title>拖動測試</title> <script type="text/javascript"> function handleDropEvent(oEvent) { var textBox = document.getElementById("txt1"); textBox.value = oEvent.type + "\n"; switch(oEvent.type) { case "dragover": case "dragenter": oEvent.returnValue = false; } } </script> <head> <body> <form> <p> <input type="text" value="拖動該文本" ondragstart="handleDropEvent(event)" ondrag="handleDropEvent(event)" ondragend="handleDropEvent(event)" /> </p> <p> <div style="background-color: red; height: 100px; width: 100px" ondragenter="handleDropEvent(event)" ondragover="handleDropEvent(event)" ondragleave="handleDropEvent(event)" ondrop="handleDropEvent(event)" /> </p> <p> <input type="text" name="txt1" id="txt1" readonly="true"/> </p> </form> </body> </html>
在瀏覽器中運行時，選中“拖動該文本”后進行拖動，將其拖動到div上時，可發現鼠標形狀變成帶加號的指針，表示此處可放置目標，讀者可以刪除上文代碼中的switch語句后，進行相同操作，可發現鼠標形狀是圓圈加以橫條，即不可放置狀態的。