IE下的拖拽Drag事件和示例
在先前某個系統(tǒng)測試的時候，有一個測試人員提到她們一個自認(rèn)為是的bug：在ie瀏覽器上，拖動系統(tǒng)某個頁面上的某個圖片對象到頁面邊緣的某個位置，會出現(xiàn)該圖片的單獨顯示頁面。
看到這個bug描述時，測試了一下，發(fā)現(xiàn)還真有那么回事，看看別人寫的那段代碼，似乎有沒有什么問題，其實就是一個簡單的img對象而已，后來查了一下，才豁然明白，原來早從IE4.0開始，網(wǎng)頁上的圖像和文本這兩個對象可以初始化系統(tǒng)拖放。在后續(xù)的IE版本中，拖放功能愈發(fā)強大，幾乎頁面上的所有內(nèi)容都能拖動。真是才疏學(xué)淺呢！可笑的是，搞web一年有余后，才知道這個東東，真是不善于觀察啊。
在朋友的推薦下，買了《JavaScript高級程序設(shè)計》這本書，今天偶然翻到一章，居然是“拖放”，該章系統(tǒng)講了拖放事件，我也跟著學(xué)了學(xué)。下面是記錄下來的學(xué)習(xí)過程。
一． 拖放初探
有兩種使用JavaScript的方法來實現(xiàn)拖放功能，即系統(tǒng)拖放和模擬拖放。
微軟為IE提供的拖放事件有兩類，其中一類在被拖動的項上觸發(fā)，還有一些在放置目標(biāo)上觸發(fā)，分別包含如下事件：
1． 拖放項事件
dragstart： 當(dāng)鼠標(biāo)按下按鈕，開始移動鼠標(biāo)時觸發(fā)；
drag：在dragstart事件觸發(fā)后，只要對象還是被移動，一直觸發(fā)該事件；
dragend：在拖動停止時觸發(fā)。
2． 放置目標(biāo)事件
dragenter：當(dāng)對象被放置到有效的放置目標(biāo)上時觸發(fā)，類似于mouseover；
dragover：當(dāng)dragenter發(fā)生后，當(dāng)被拖動的項在放置目標(biāo)的邊界內(nèi)時，將一直觸發(fā)該事件；
dragleave：當(dāng)dragover停止觸發(fā)，項被拖出放置目標(biāo)時，觸發(fā)該事件，類似于mouseout；
drop：如果被拖動的項正是在這個目標(biāo)上放下的，則會觸發(fā)drop事件而不是dragleave事件。
為了學(xué)習(xí)這兩種類型的事件，讓我們來看一個綜合的例子。代碼如下：
<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> 因這個例子比較簡單，在瀏覽器中運行一下就可以看到結(jié)果，在此不贅述。
二．拖放進(jìn)階
當(dāng)嘗試將一些文本或圖像拖放到無效的對象上時，會看到一個特別的鼠標(biāo)形狀，即圓圈中有條線，表示的是該位置不能放置。盡管所有的元素都支持放置目標(biāo)的事件，但默認(rèn)情況下它們的行為是不允許放置的，例如div。若想將<div/>變成有效的放置對象，必須覆蓋默認(rèn)的dragenter和dragover行為，因為這些是特定于IE的，所以可直接將oEvent.returnValue特性設(shè)置為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>在瀏覽器中運行時，選中“拖動該文本”后進(jìn)行拖動，將其拖動到div上時，可發(fā)現(xiàn)鼠標(biāo)形狀變成帶加號的指針，表示此處可放置目標(biāo)，讀者可以刪除上文代碼中的switch語句后，進(jìn)行相同操作，可發(fā)現(xiàn)鼠標(biāo)形狀是圓圈加以橫條，即不可放置狀態(tài)的。
總結(jié)
以上是生活随笔為你收集整理的IE下的拖拽Drag事件和示例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SecureCrt使用技巧
- 下一篇： PHP导出pdf文件_dompdf