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

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

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

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

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

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

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

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

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

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

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

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

定義拖拽目標(biāo)

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

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

設(shè)置拖動效果

定義放置目標(biāo)

拖放后的邏輯處理

默認情況下，圖像、鏈接和已選中的文本是可以拖動的。文本需要被選中才能拖動，而圖像和鏈接在任何時候都可以拖動。

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

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


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

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

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

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

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來替代text和URL，因為后者存在兼容問題并且最終會被映射為前者。

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

setDrawImage是 dataTransfer 對象的一個方法。

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

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

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

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

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

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

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

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

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

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

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

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

none: 被拖動的元素不能有任何行為。

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)事件，但這些元素默認是不允許放置的。如果拖動的元素拖放到了不允許放置的元素，是不會觸發(fā)drop 事件的。
把元素變成有效的放置目標(biāo)，需要重寫dragenter和dragover事件的默認行為。

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

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

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

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

拖放操作 | MDN

拖拽操作 | MDN

DataTransfer | MDN

拖拽類型列表 | MDN

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