拽成為一項標準也是近幾年的事，屬于HTML5中的一部分，作為一種交互行為，拖拽是被廣泛應用再界面軟件中的，例如桌面應用，word、QQ軟件都有拖拽行為。

在HTML5標準實施之前，拖拽也是被廣泛使用的，web開發者將click、mouseover,mousemove組合起來實現拖拽邏輯，過程略顯冗余和繁瑣。

一言蔽之，HTML5的出現讓拖拽開發變得簡單

先來一張流程圖

下圖描繪了拖拽的流程.

要點概括總結

結合上圖，我們梳理下知識點，做個拆分與解析。

一共有哪些事件

• 拖： dragstart , drag , dragend
• 放： dragenter , dragover ， dragleave , drop

哪些實體可以被拖

draggable
wordContainerEle.onselectstart = event => false;

這意味著：

• 元素 默認禁止拖拽 （貌似都是），需要手動設置draggable屬性為true。
• 文字默認都是能選中的，這個大家都習以為常了。

需要說明的是，一個元素被設置draggable之后，里面的文本就無法被選中了（chrome測試如此）。

關于放，有哪些限制？

• dragenter :都可以。
• dragover :都可以
• dragleave :都可以
• drop :只有在 dragover監聽中阻止默認行為 ，才能觸發drop

拖放會冒泡嘛？

答案是肯定的。假設一個父元素包含一個子元素，理所當然地，用戶拖子元素也是間接的拖動父元素的過程。

近在摸魚的過程中，發現了一個拖動組件，發現挺有意思的。于是想到在HTML5原生就支持這個功能，于是就想著自己也試著弄一個小demo試試看

提要

最早在網頁中引入拖放功能的是IE4。當時，網頁中只有兩種對象可以拖放，圖像和某些文本。拖動圖像時，先把鼠標放在圖像上，按住鼠標不放就可以拖動它。拖動文本時，要先選中文本，然后就可以想要拖動圖像那樣拖動。在IE4中，唯一有效的防止目標是文本框，到了IE5，拖放功能添加了新的時間，網頁中幾乎任意元素都可以作為目標元素。HTML5以IE的實例為基礎制訂了拖放規范。

案例

• 一個簡單的拖拉

通過div添加draggable屬性為true之后，我們已經可以進行簡單的拖動了。那么拖動已經是可以拖動了，我們需要另一個地方來接收拖動，所以我們對代碼做了些修改

• 來回拖動案例

需要注意的點

1.需要設置要移動屬性draggable的屬性值為true才支持拖拽
2.dataTransfer.setData設置了被拖動的數據類型和值
3.dataTransfer.getData("Text") 方法獲得被拖的數據。
4.當放置被拖數據時，會發生 drop 事件，調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）。

API

• 拖動前

draggable元素是否可拖拽
- true 可拖拽
- false 不可拖拽
- auto 跟隨瀏覽器定義是否可以拖拽

• 綁定在拖拽目標

dragstart()
- 當用戶開始拖拽一個元素或者一個文本選取區塊的時觸發
drag()
- 當用戶正在拖拽一個元素或者一個文本選取區塊的時觸發
dragend()
- 當用戶結束拖拽一個元素或者一個文本選取區塊的時觸發

• 綁定在放置目標

dragenter	
- 當一個元素或文字選取區塊被拖曳移動進入一個有效的放置目標時觸發
dragover	
- 當一個元素或文字選取區塊被拖曳移動經過一個有效的放置目標時觸發
dragleave	
- 當一個元素或文字選取區塊被拖曳移動離開一個有效的放置目標時觸發
dragexist	
- 當一個元素不再是被選取中的拖曳元素時觸發
drop	
-當一個元素或文字選取區塊被放置至一個有效的放置目標時觸發

• DataTransfer對象

屬性
- types 
只讀屬性。它返回一個我們在dragstart事件中設置的拖動數據格式的數組。 格式順序與拖動操作中包含的數據順序相同。
- files
返回拖動操作中的文件列表。包含一個在數據傳輸上所有可用的本地文件列表。如果拖動操作不涉及拖動文件，此屬性是一個空列表。
- dropEffect
獲取當前選定的拖放操作的類型或將操作設置為新類型[none、move、copy、link]
- effectAllowed
指定拖放操作所允許的效果[none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized]

方法
void setData(format, data)
- 將拖動操作的拖動數據設置為指定的數據和類型。format可以是MIME類型
String getData(format)	
- 返回指定格式的數據，format與setData()中一致
void clearData([format])	
- 刪除給定類型的拖動操作的數據。如果給定類型的數據不存在，此方法不執行任何操作。如果不給定參數，則刪除所有類型的數據。
void setDragImage(img, x, y)	
- 指定一副圖像，當拖動發生時，顯示在光標下方。大多數情況下不用設置，因為被拖動的節點被創建成默認圖片。x,y參數分別指示圖像的水平、垂直偏移量

兼容性

總結

簡單幾行代碼就實現簡單拖拽效果，如果不使用原生drop要實現拖拽效果需要比較復雜，兼容性方面的問題也沒有特別大的問題（IE除外），相信在今后的工作中會有機會用到。當然在使用過程中也遇到一個問題，當放置被拖數據時，會發生 drop 事件，調用 preventDefault來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開），如果不使用preventDefault，則不會觸發drop事件，則拖拽就不會觸發。