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

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

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

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

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

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

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

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

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

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

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

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

定義拖拽目標

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

（可選）設置拖動反饋圖片

設置拖動效果

定義放置目標

拖放后的邏輯處理

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

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

// 設置圖像不可拖動


// 設置這個元素可以拖動
可拖動的DIV

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

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

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

function dragStart(e) {
    // 設置文本數(shù)據(jù)
    e.dataTransfer.setData("text", "hello world");
    // 設置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，因為后者存在兼容問題并且最終會被映射為前者。

當發(fā)生一次拖拽時（dragstart 事件觸發(fā)的元素），會在拖拽的元素處產(chǎn)生一個半透明的圖片（該元素副本），并且會在拖拽過程中跟隨鼠標移動，這就是反饋圖片。這個圖片是自動生成的，無需你親自設定，但可以通過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ù)，還能通過它來確定被拖動元素以及防止目標元素能夠接收什么操作。主要用到兩個屬性：dropEffect和effectAllowed。

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

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

move: 可以把拖放的元素移動到放置目標。

copy: 可以把拖放的元素復制到放置目標。

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

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

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事件處理程序中設置它的屬性。

所有元素都支持放置目標事件，但這些元素默認是不允許放置的。如果拖動的元素拖放到了不允許放置的元素，是不會觸發(fā)drop 事件的。
把元素變成有效的放置目標，需要重寫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ā)生時做一些事情，你可能想要獲取拖拽目標攜帶的數(shù)據(jù)并做某些相應的事情。

拖放操作 | MDN

拖拽操作 | MDN

DataTransfer | MDN

拖拽類型列表 | MDN

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