摘要：發(fā)展原生拖放的發(fā)展大致可分為三個(gè)階段。在的實(shí)例基礎(chǔ)上，進(jìn)一步制定了拖放的規(guī)范。也根據(jù)規(guī)范實(shí)現(xiàn)了原生拖放功能。被拖動(dòng)的元素在放置目標(biāo)范圍內(nèi)移動(dòng)時(shí)，會(huì)持續(xù)觸發(fā)該事件。參考資料拖放操作拖拽操作拖拽類型列表高級(jí)程序設(shè)計(jì)第版第章腳本編程原生拖放

原生拖放的發(fā)展大致可分為三個(gè)階段：IE4、IE5+、HTML5。

IE4 是最早在網(wǎng)頁(yè)中引入 JavaScript 拖放功能的，當(dāng)時(shí)只有圖像和選中的文本可以拖放，并且只有文本框是有效的放置目標(biāo)。
IE5 拖放功能進(jìn)一步得到了擴(kuò)展，添加了新的事件，幾乎網(wǎng)頁(yè)中的任何元素都可以作為放置目標(biāo)。
IE5.5+ 又更進(jìn)一步，讓網(wǎng)頁(yè)中的任何元素都可以拖放。
HTML5 在 IE 的實(shí)例基礎(chǔ)上，進(jìn)一步制定了拖放的規(guī)范。

Firefox 3.5+、Safari 3+、Chrome、Opera 12+也根據(jù) HTML5 規(guī)范實(shí)現(xiàn)了原生拖放功能。

在進(jìn)行拖放操作的不同階段會(huì)觸發(fā)數(shù)種事件。注意，在拖拽的時(shí)候只會(huì)觸發(fā)拖拽的相關(guān)事件，鼠標(biāo)事件，例如 mousemove，是不會(huì)觸發(fā)的。當(dāng)從操作系統(tǒng)拖拽文件到瀏覽器的時(shí)候，dragstart 和 dragend 事件不會(huì)觸發(fā)。

dragstart
當(dāng)一個(gè)元素被拖拽的時(shí)候觸發(fā)。

drag
觸發(fā) dragstart 后，隨即會(huì)觸發(fā) drag 事件，而且在元素被拖動(dòng)期間會(huì)持續(xù)觸發(fā)該事件。

dragend
拖動(dòng)停止時(shí)觸發(fā)。（無(wú)論元素是放到了有效的放置目標(biāo)還是無(wú)效的放置目標(biāo)上）

dragenter
元素被拖放到放置目標(biāo)上觸發(fā)。

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

dragleave
元素被拖出了放置目標(biāo)，觸發(fā)該事件，并且 dragover 事件不再發(fā)生。

drop
元素被放到了放置目標(biāo)中，觸發(fā)該事件。

定義拖拽目標(biāo)

定義拖拽數(shù)據(jù)

（可選）設(shè)置拖動(dòng)反饋圖片

設(shè)置拖動(dòng)效果

定義放置目標(biāo)

拖放后的邏輯處理

默認(rèn)情況下，圖像、鏈接和已選中的文本是可以拖動(dòng)的。文本需要被選中才能拖動(dòng)，而圖像和鏈接在任何時(shí)候都可以拖動(dòng)。

讓其他元素可拖動(dòng)也是可以的。HTML5 為所有 HTML 元素規(guī)定了一個(gè) draggable 屬性，表示是否可以拖動(dòng)。圖像和鏈接的 draggable 屬性自動(dòng)被設(shè)置成了 true，其他元素是 false。

// 設(shè)置圖像不可拖動(dòng)


// 設(shè)置這個(gè)元素可以拖動(dòng)
可拖動(dòng)的DIV

支持 draggable 屬性的瀏覽器有 IE 10+、Firefox 4+、Safari 5+、Chrome 和 Opera 12+。

我們有時(shí)會(huì)需要在拖放操作時(shí)進(jìn)行數(shù)據(jù)交換，IE 引入了 dataTransfer對(duì)象，它是事件對(duì)象的一個(gè)屬性，用于從被拖動(dòng)元素向放置目標(biāo)傳遞數(shù)據(jù)。因?yàn)樗鞘录?duì)象的屬性，所以只能在拖放事件中訪問(wèn)，不能多帶帶創(chuàng)建。目前，HTML5 規(guī)范也收入了 dataTransfer 對(duì)象。

實(shí)現(xiàn)數(shù)據(jù)交換主要用到兩個(gè)方法：getData(type)和setData(type, data)。type表示保存的數(shù)據(jù)類型，取值為“text”或“URL”，getData() 通過(guò) setData() 設(shè)置的 type 來(lái)取到保存的值。

function dragStart(e) {
    // 設(shè)置文本數(shù)據(jù)
    e.dataTransfer.setData("text", "hello world");
    // 設(shè)置URL
    e.dataTransfer.setData("URL", "www.seiue.com");
}

function drop(e) {
    // 接收文本數(shù)據(jù)
    var text = e.dataTransfer.getData("text");
    // 接收URL
    var url = e.dataTransfer.getData("URL");
}

drag.addEventListener("dragStart", dragEnter, false);
drop.addEventListener("drop", drop, false);

建議總是添加 text/plain和text/uri-list來(lái)替代text和URL，因?yàn)楹笳叽嬖诩嫒輪?wèn)題并且最終會(huì)被映射為前者。

當(dāng)發(fā)生一次拖拽時(shí)（dragstart 事件觸發(fā)的元素），會(huì)在拖拽的元素處產(chǎn)生一個(gè)半透明的圖片（該元素副本），并且會(huì)在拖拽過(guò)程中跟隨鼠標(biāo)移動(dòng)，這就是反饋圖片。這個(gè)圖片是自動(dòng)生成的，無(wú)需你親自設(shè)定，但可以通過(guò)setDrawImage來(lái)自定義一個(gè)反饋圖片。

setDrawImage是 dataTransfer 對(duì)象的一個(gè)方法。

event.dataTransfer.setDrawImage(image, xOffset, yOffset)

需要傳入三個(gè)參數(shù)，分別是：一個(gè)圖片的引用（可以是圖片元素對(duì)象、canvas或其他元素對(duì)象），圖像內(nèi)的水平偏移量，圖像內(nèi)的垂直偏移量。下面的例子定義了一個(gè)反饋圖片。

function dragCustomImage(e) {
  var img = document.createElement("img")
  img.setAttribute("src", "drag-img.jpeg")

     e.dataTransfer.setDragImage(img, 150, 150)
}

dataTransfer 對(duì)象不光能夠傳輸數(shù)據(jù)，還能通過(guò)它來(lái)確定被拖動(dòng)元素以及防止目標(biāo)元素能夠接收什么操作。主要用到兩個(gè)屬性：dropEffect和effectAllowed。

可以知道被拖動(dòng)的元素能夠執(zhí)行哪種放置操作。這個(gè)屬性有4個(gè)值。

none: 禁止把拖放的元素放在這里。

move: 可以把拖放的元素移動(dòng)到放置目標(biāo)。

copy: 可以把拖放的元素復(fù)制到放置目標(biāo)。

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

把元素拖放到放置目標(biāo)時(shí)，以上的每個(gè)值都會(huì)導(dǎo)致光標(biāo)顯示不同的符號(hào)。每種操作觸發(fā)什么樣的行為需要你來(lái)自行實(shí)現(xiàn)，瀏覽器不會(huì)幫你移動(dòng)、復(fù)制和打開鏈接。要使用 dropEffect，我們需要在 dragenter事件處理程序中設(shè)置它的屬性。

dropEffect 屬性需要搭配 effectAllowed 屬性才生效。effectAllowed 屬性表示允許拖動(dòng)元素的哪種 dropEffect。effectAllowed 有以下值。

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

copy: 只允許值為”copy“的 dropEffect。

link: 只允許值為“l(fā)ink” 的 dropEffect。

move: 只允許值為“move”的 dropEffect。

copyLink: 允許值為“copy”和“l(fā)ink”的 dropEffect。

copyMove: 允許值為“copy”和“move”的 dropEffect。

linkMove: 允許值為“l(fā)ink”和“move“的 dropEffect。

all: 允許任意 dropEffect。

需要在dragstart事件處理程序中設(shè)置它的屬性。

所有元素都支持放置目標(biāo)事件，但這些元素默認(rèn)是不允許放置的。如果拖動(dòng)的元素拖放到了不允許放置的元素，是不會(huì)觸發(fā)drop 事件的。
把元素變成有效的放置目標(biāo)，需要重寫dragenter和dragover事件的默認(rèn)行為。

var dropTarget = document.getElementById("dropTarget");

dropTarget.addEventListener("dragenter", function(e) {
    e.preventDefault();
}, false);

dropTarget.addEventListener("dragover", function(e) {
    e.preventDefault();
}, false);

在drop事件發(fā)生時(shí)做一些事情，你可能想要獲取拖拽目標(biāo)攜帶的數(shù)據(jù)并做某些相應(yīng)的事情。

拖放操作 | MDN

拖拽操作 | MDN

DataTransfer | MDN

拖拽類型列表 | MDN

JavaScript高級(jí)程序設(shè)計(jì)（第3版）第16章 HTML5 腳本編程 - 原生拖放