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