資訊專欄INFORMATION COLUMN
摘要：在中，唯一有效的放置目標是文本框。以的實例為基礎指定了拖放規(guī)范。觸發(fā)事件后，隨即會觸發(fā)事件，而且在元素被拖動期間會持續(xù)發(fā)送該事件。指定一副圖像，當拖動發(fā)生時，顯示在光標下方。
最早在網(wǎng)頁中引入JavaScript拖放功能是IE4。當時，網(wǎng)頁中只有兩種對象可以拖放：圖像和某些文本。在IE4中，唯一有效的放置目標是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且?guī)缀蹙W(wǎng)頁中的任何元素都可以作為放置目標。IE5.5更進一步讓網(wǎng)頁中的任何元素都可以拖放。HTML5以IE的實例為基礎指定了拖放規(guī)范。
拖放事件拖動某些元素時，將一次觸發(fā)下列事件（被拖放元素上的事件）：
dragstart
drag
dragend
拖動開始時，可以通過ondragstart事件處理程序來運行JavaScript代碼。觸發(fā)dragstart事件后，隨即會觸發(fā)drag事件，而且在元素被拖動期間會持續(xù)發(fā)送該事件。這個事件與mousemove事件相似，在鼠標移動過程中，mousemove事件也會持續(xù)發(fā)生。當拖動停止時（無論是把元素放到了有效的放置目標，還是放到了無效的放置目標上），會觸發(fā)dragend事件。
瀏覽器不會在拖動期間改變被拖動元素的外觀，但你可以自己修改。
當元素被拖放到一個有效的放置目標上時，下列事件會依次發(fā)生（放置目標元素上的事件）：
dragenter
dragover
dragleave或drop
只要元素被拖動到放置目標上，就會觸發(fā)dragenter事件（類似于mouseover事件）。
緊隨其后的是dragover事件，而且被拖動的元素還在放置目標的范圍內(nèi)移動時，就會持續(xù)觸發(fā)該事件。
如果元素被拖出了放置目標，dragover事件不再發(fā)生，但會觸發(fā)dragleave事件（類似于mouseout事件）。
如果元素被放到了放置目標中，則會觸發(fā)drop事件而不是dragleave事件。
自定義放置目標可以把任何元素變成有效的放置目標，方法是重寫dragenter和dragover事件的默認行為。
var droptarget = document.getElementById("droptarget");
droptarget.ondragover = function() {
event.preventDefault();
};
droptarget.ondragenter = function () {
event.preventDefault();
};
在Firefox 3.5+中，放置事件的默認行為是打開被放到放置目標上的URL。因此，為了讓Firefox支持正常的拖放，還要取消drop事件的默認行為，阻止它打開URL：
var droptarget = document.getElementById("droptarget");
droptarget.ondragover = function() {
event.preventDefault();
};
droptarget.ondragenter = function () {
event.preventDefault();
};
droptarget.ondrop = function () {
event.preventDefault();
};
dataTransfer對象
為了在拖放操作時實現(xiàn)數(shù)據(jù)交換，IE 5引入了
dataTransfer對象
它是事件對象的一個屬性，用于從被拖動元素向放置目標傳遞字符串格式的數(shù)據(jù)。因為它是事件對象的屬性，所以只能在拖放事件的事件處理程序中訪問dataTransfer對象。
dataTransfer對象有兩個主要方法：
getData()
setData()
getData()可以取得由setData()保存的值。setData()方法的第一個參數(shù)，也是getDAta()方法唯一的一個參數(shù)，是一個字符串，表示保存的數(shù)據(jù)類型，取值為”text”或“URL”，如下所示：
//設置和接收文本數(shù)據(jù)
event.dataTransfer.setDAta("text", "some text");
var text = event.dataTransfer.getData("text");
//設置和接收URL
event.dataTransfer.setData("URL", "HTML://www.w3cmm.com/");
IE只定義了“text”和“URL”兩種有效的數(shù)據(jù)類型，而HTML5則對此加以擴展，允許指定各種MIME類型。HTML5也支持“text”和“URL”，但這兩種類型會被映射為“text/plain”和“text/uri-list”。
保存在dataTransfer對象中的數(shù)據(jù)只能在drop事件處理程序中讀取。在拖動文本框中的文本時，瀏覽器會調(diào)用setData()方法，將拖動的文本以“text”格式保存在dataTransfer對象中。類似地，在拖放鏈接或圖像時，會調(diào)用setData()方法并保存URL。也可以在dragstart事件處理程序中調(diào)用setData()，手工保存自己要傳輸?shù)臄?shù)據(jù)，以便將來使用。
Firefox在其第5個版本之前不能正確地將“URL”和“text”映射為“text/uri-list”和“text/plain”。但是卻能把“Text”映射為“text/plain”。為了更好地在跨瀏覽器的情況下從dataTransfer對象取得數(shù)據(jù)，最好在取得URL數(shù)據(jù)時檢測兩個值，而在取得文本數(shù)據(jù)時使用“text”。
var dataTransfer = event.dataTransfer;
//讀取URL
var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");
//讀取文本
var text = dataTransfer.getData("Text");
dropEffect與effectAllowed
利用dataTransfer對象，可不光是能夠傳輸數(shù)據(jù)，還能通過它來確定被拖動的元素以及作為放置目標的元素能夠接受什么操作。為此，需要訪問dataTransfer對象的兩個屬性：
dropEffect
effectAllowed
通過dropEffect屬性可以知道被拖動的元素能夠執(zhí)行哪種放置行為。這個屬性有下列4個可能的值:
none：不能把拖動的元素放在這里。這是除文本框之外所有元素的默認值。
move：應該把拖動的元素移動到放置目標。
copy：應該把拖動的元素復制到放置目標。
link：表示放置目標會打開拖動的元素（但拖動的元素必須是一個鏈接，有URL）。
要使用dropEfect屬性，必須在ondraggenter事件處理程序中針對放置目標來設置它。
dropEffect屬性只有搭配effectAllowed屬性才有用。effectAllowed屬性表示允許拖放元素的哪種dropEffect，effectAllowed屬性可能的值如下:
uninitialized：沒有該被拖動元素放置行為。
none：被拖動的元素不能有任何行為。
copy：只允許值為copy的dropEffect。
link：只允許值為link的dropEffect。
move:只允許值為move的dropEffect。
copyLink：允許值為copy和link的dropEffect。
copyMove：允許值為copy和link的dropEffect。
linkMove：允許職位link和move的dropEffect。
all：允許任意dropEffect。
必須在ondraggstart事件處理程序中設置effectAllowed屬性。
可拖動讓其它元素可以拖動也是可能的。HTML5為所有HTML元素規(guī)定了一個draggable屬性，表示元素是否可以拖動。
