16.2 原生拖放 483
1
15
16
4
5
13
6
7
8
9
10
11
12
以上代碼執(zhí)行后，你就會(huì)發(fā)現(xiàn)當(dāng)拖動(dòng)著元素移動(dòng)到放置目標(biāo)上時(shí)，光標(biāo)變成了允許放置的符號(hào)。當(dāng)
然，釋放鼠標(biāo)也會(huì)觸發(fā) drop 事件。
在 Firefox 3.5+中，放置事件的默認(rèn)行為是打開被放到放置目標(biāo)上的 URL。換句話說(shuō)，如果是把圖
像拖放到放置目標(biāo)上，頁(yè)面就會(huì)轉(zhuǎn)向圖像文件；而如果是把文本拖放到放置目標(biāo)上，則會(huì)導(dǎo)致無(wú)效 URL
錯(cuò)誤。因此，為了讓 Firefox 支持正常的拖放，還要取消 drop 事件的默認(rèn)行為，阻止它打開 URL：
EventUtil.addHandler(droptarget, \"drop\", function(event){
EventUtil.preventDefault(event);
});
16.2.3 dataTransfer對(duì)象
只有簡(jiǎn)單的拖放而沒有數(shù)據(jù)變化是沒有什么用的。為了在拖放操作時(shí)實(shí)現(xiàn)數(shù)據(jù)交換，IE 5 引入了
dataTransfer 對(duì)象，它是事件對(duì)象的一個(gè)屬性，用于從被拖動(dòng)元素向放置目標(biāo)傳遞字符串格式的數(shù)據(jù)。
因?yàn)樗鞘录?duì)象的屬性，所以只能在拖放事件的事件處理程序中訪問(wèn) dataTransfer 對(duì)象。在事件
處理程序中，可以使用這個(gè)對(duì)象的屬性和方法來(lái)完善拖放功能。目前，HTML5 規(guī)范草案也收入了
dataTransfer 對(duì)象。
dataTransfer 對(duì)象有兩個(gè)主要方法：getData()和 setData()。不難想象，getData()可以取
得由 setData()保存的值。setData()方法的第一個(gè)參數(shù)，也是 getData()方法唯一的一個(gè)參數(shù)，是
一個(gè)字符串，表示保存的數(shù)據(jù)類型，取值為\"text\"或\"URL\"，如下所示：
//設(shè)置和接收文本數(shù)據(jù)
event.dataTransfer.setData(\"text\", \"some text\");
var text = event.dataTransfer.getData(\"text\");
//設(shè)置和接收 URL
event.dataTransfer.setData(\"URL\", \"http://www.wrox.com/\");
var url = event.dataTransfer.getData(\"URL\");
IE只定義了\"text\"和\"URL\"兩種有效的數(shù)據(jù)類型，而HTML5則對(duì)此加以擴(kuò)展，允許指定各種MIME
類型?？紤]到向后兼容，HTML5 也支持\"text\"和\"URL\"，但這兩種類型會(huì)被映射為\"text/plain\"和
\"text/uri-list\"。
實(shí)際上，dataTransfer 對(duì)象可以為每種 MIME 類型都保存一個(gè)值。換句話說(shuō)，同時(shí)在這個(gè)對(duì)象
中保存一段文本和一個(gè) URL 不會(huì)有任何問(wèn)題。不過(guò)，保存在 dataTransfer 對(duì)象中的數(shù)據(jù)只能在 drop
事件處理程序中讀取。如果在 ondrop 處理程序中沒有讀到數(shù)據(jù)，那就是 dataTransfer 對(duì)象已經(jīng)被
銷毀，數(shù)據(jù)也丟失了。
在拖動(dòng)文本框中的文本時(shí)，瀏覽器會(huì)調(diào)用 setData()方法，將拖動(dòng)的文本以\"text\"格式保存在
dataTransfer 對(duì)象中。類似地，在拖放鏈接或圖像時(shí)，會(huì)調(diào)用 setData()方法并保存 URL。然后，
在這些元素被拖放到放置目標(biāo)時(shí)，就可以通過(guò) getData()讀到這些數(shù)據(jù)。當(dāng)然，作為開發(fā)人員，你也
可以在 dragstart 事件處理程序中調(diào)用 setData()，手工保存自己要傳輸?shù)臄?shù)據(jù)，以便將來(lái)使用。
將數(shù)據(jù)保存為文本和保存為 URL 是有區(qū)別的。如果將數(shù)據(jù)保存為文本格式，那么數(shù)據(jù)不會(huì)得到任
何特殊處理。而如果將數(shù)據(jù)保存為 URL，瀏覽器會(huì)將其當(dāng)成網(wǎng)頁(yè)中的鏈接。換句話說(shuō)，如果你把它放置
到另一個(gè)瀏覽器窗口中，瀏覽器就會(huì)打開該 URL。
Firefox 在其第 5 個(gè)版本之前不能正確地將 \"url\" 和 \"text\" 映射為 \"text/uri-list\" 和
\"text/plain\"。但是卻能把\"Text\"（T 大寫）映射為\"text/plain\"。為了更好地在跨瀏覽器的情況
圖靈社區(qū)會(huì)員 StinkBC(StinkBC@gmail.com) 專享 尊重版權(quán)
