摘要：在中，唯一有效的放置目標(biāo)是文本框。以的實(shí)例為基礎(chǔ)指定了拖放規(guī)范。觸發(fā)事件后，隨即會(huì)觸發(fā)事件，而且在元素被拖動(dòng)期間會(huì)持續(xù)發(fā)送該事件。指定一副圖像，當(dāng)拖動(dòng)發(fā)生時(shí)，顯示在光標(biāo)下方。

最早在網(wǎng)頁(yè)中引入JavaScript拖放功能是IE4。當(dāng)時(shí)，網(wǎng)頁(yè)中只有兩種對(duì)象可以拖放：圖像和某些文本。在IE4中，唯一有效的放置目標(biāo)是文本框。到了IE5，拖放功能得到拓展，添加了新的事件，而且?guī)缀蹙W(wǎng)頁(yè)中的任何元素都可以作為放置目標(biāo)。IE5.5更進(jìn)一步讓網(wǎng)頁(yè)中的任何元素都可以拖放。HTML5以IE的實(shí)例為基礎(chǔ)指定了拖放規(guī)范。

拖動(dòng)某些元素時(shí)，將一次觸發(fā)下列事件（被拖放元素上的事件）：

dragstart

drag

dragend

拖動(dòng)開始時(shí)，可以通過ondragstart事件處理程序來運(yùn)行JavaScript代碼。觸發(fā)dragstart事件后，隨即會(huì)觸發(fā)drag事件，而且在元素被拖動(dòng)期間會(huì)持續(xù)發(fā)送該事件。這個(gè)事件與mousemove事件相似，在鼠標(biāo)移動(dòng)過程中，mousemove事件也會(huì)持續(xù)發(fā)生。當(dāng)拖動(dòng)停止時(shí)（無論是把元素放到了有效的放置目標(biāo)，還是放到了無效的放置目標(biāo)上），會(huì)觸發(fā)dragend事件。

瀏覽器不會(huì)在拖動(dòng)期間改變被拖動(dòng)元素的外觀，但你可以自己修改。

當(dāng)元素被拖放到一個(gè)有效的放置目標(biāo)上時(shí)，下列事件會(huì)依次發(fā)生（放置目標(biāo)元素上的事件）：

dragenter

dragover

dragleave或drop

只要元素被拖動(dòng)到放置目標(biāo)上，就會(huì)觸發(fā)dragenter事件（類似于mouseover事件）。

緊隨其后的是dragover事件，而且被拖動(dòng)的元素還在放置目標(biāo)的范圍內(nèi)移動(dòng)時(shí)，就會(huì)持續(xù)觸發(fā)該事件。

如果元素被拖出了放置目標(biāo)，dragover事件不再發(fā)生，但會(huì)觸發(fā)dragleave事件（類似于mouseout事件）。

如果元素被放到了放置目標(biāo)中，則會(huì)觸發(fā)drop事件而不是dragleave事件。

可以把任何元素變成有效的放置目標(biāo)，方法是重寫dragenter和dragover事件的默認(rèn)行為。

var droptarget = document.getElementById("droptarget");
droptarget.ondragover = function() {
    event.preventDefault();
};
droptarget.ondragenter = function () {
    event.preventDefault();
};

在Firefox 3.5+中，放置事件的默認(rèn)行為是打開被放到放置目標(biāo)上的URL。因此，為了讓Firefox支持正常的拖放，還要取消drop事件的默認(rèn)行為，阻止它打開URL：

var droptarget = document.getElementById("droptarget");
droptarget.ondragover = function() {
    event.preventDefault();
};
droptarget.ondragenter = function () {
    event.preventDefault();
};
droptarget.ondrop = function () {
    event.preventDefault();
};

為了在拖放操作時(shí)實(shí)現(xiàn)數(shù)據(jù)交換，IE 5引入了

dataTransfer對(duì)象

它是事件對(duì)象的一個(gè)屬性，用于從被拖動(dòng)元素向放置目標(biāo)傳遞字符串格式的數(shù)據(jù)。因?yàn)樗鞘录?duì)象的屬性，所以只能在拖放事件的事件處理程序中訪問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", "HTML://www.w3cmm.com/");

IE只定義了“text”和“URL”兩種有效的數(shù)據(jù)類型，而HTML5則對(duì)此加以擴(kuò)展，允許指定各種MIME類型。HTML5也支持“text”和“URL”，但這兩種類型會(huì)被映射為“text/plain”和“text/uri-list”。

保存在dataTransfer對(duì)象中的數(shù)據(jù)只能在drop事件處理程序中讀取。在拖動(dòng)文本框中的文本時(shí)，瀏覽器會(huì)調(diào)用setData()方法，將拖動(dòng)的文本以“text”格式保存在dataTransfer對(duì)象中。類似地，在拖放鏈接或圖像時(shí)，會(huì)調(diào)用setData()方法并保存URL。也可以在dragstart事件處理程序中調(diào)用setData()，手工保存自己要傳輸?shù)臄?shù)據(jù)，以便將來使用。

Firefox在其第5個(gè)版本之前不能正確地將“URL”和“text”映射為“text/uri-list”和“text/plain”。但是卻能把“Text”映射為“text/plain”。為了更好地在跨瀏覽器的情況下從dataTransfer對(duì)象取得數(shù)據(jù)，最好在取得URL數(shù)據(jù)時(shí)檢測(cè)兩個(gè)值，而在取得文本數(shù)據(jù)時(shí)使用“text”。

var dataTransfer = event.dataTransfer;
//讀取URL
var url = dataTransfer.getData("url") || dataTransfer.getData("text/uri-list");
//讀取文本
var text = dataTransfer.getData("Text");

利用dataTransfer對(duì)象，可不光是能夠傳輸數(shù)據(jù)，還能通過它來確定被拖動(dòng)的元素以及作為放置目標(biāo)的元素能夠接受什么操作。為此，需要訪問dataTransfer對(duì)象的兩個(gè)屬性：

dropEffect

effectAllowed

通過dropEffect屬性可以知道被拖動(dòng)的元素能夠執(zhí)行哪種放置行為。這個(gè)屬性有下列4個(gè)可能的值:

none：不能把拖動(dòng)的元素放在這里。這是除文本框之外所有元素的默認(rèn)值。

move：應(yīng)該把拖動(dòng)的元素移動(dòng)到放置目標(biāo)。

copy：應(yīng)該把拖動(dòng)的元素復(fù)制到放置目標(biāo)。

link：表示放置目標(biāo)會(huì)打開拖動(dòng)的元素（但拖動(dòng)的元素必須是一個(gè)鏈接，有URL）。

要使用dropEfect屬性，必須在ondraggenter事件處理程序中針對(duì)放置目標(biāo)來設(shè)置它。

dropEffect屬性只有搭配effectAllowed屬性才有用。effectAllowed屬性表示允許拖放元素的哪種dropEffect，effectAllowed屬性可能的值如下:

uninitialized：沒有該被拖動(dòng)元素放置行為。

none：被拖動(dòng)的元素不能有任何行為。

copy：只允許值為copy的dropEffect。

link：只允許值為link的dropEffect。

move:只允許值為move的dropEffect。

copyLink：允許值為copy和link的dropEffect。

copyMove：允許值為copy和link的dropEffect。

linkMove：允許職位link和move的dropEffect。

all：允許任意dropEffect。

必須在ondraggstart事件處理程序中設(shè)置effectAllowed屬性。

讓其它元素可以拖動(dòng)也是可能的。HTML5為所有HTML元素規(guī)定了一個(gè)draggable屬性，表示元素是否可以拖動(dòng)。

...

HTML5規(guī)范規(guī)定dataTransfer對(duì)象還應(yīng)該包含下列方法和屬性。

addElement(element)：為拖動(dòng)操作添加一個(gè)元素。添加這個(gè)元素只影響數(shù)據(jù)（即增加作為拖動(dòng)源而影響回調(diào)的對(duì)象），不會(huì)影響拖動(dòng)操作時(shí)頁(yè)面元素的外觀。在寫作文本時(shí)，只有Firefox 3.5+實(shí)現(xiàn)了這個(gè)方法。

clearData(format)：清除以特定格式保存的數(shù)據(jù)。實(shí)現(xiàn)這個(gè)方法的瀏覽器有IE、Firefox 3.5、Chrome和Safari 4+。

setDragImage(element, x, y)：指定一副圖像，當(dāng)拖動(dòng)發(fā)生時(shí)，顯示在光標(biāo)下方。這個(gè)方法接受的三個(gè)參數(shù)分別是要顯示的HTML元素和光標(biāo)在圖像中的x、y坐標(biāo)。其中，HTML元素可以是一副圖像，也可以是其它元素。是圖像則顯示圖像，是其它元素則顯示渲染后的元素。實(shí)現(xiàn)這個(gè)方法的瀏覽器有Firefox 3.5+、Safari 4+ 和 Chorme。

types：當(dāng)前保存的數(shù)據(jù)類型。這是一個(gè)類似數(shù)組的集合，以“text”這樣的字符串形式保存著數(shù)據(jù)類型。實(shí)現(xiàn)這個(gè)屬性的瀏覽器有IE10+、Firefox 3.5+和Chrome。