一、關(guān)于拖拽API
拖拽API是HTML5的新特性，相對(duì)于其他新特性來(lái)說(shuō)，重要程度占到6成，實(shí)際開(kāi)發(fā)中使用比例占到3成，學(xué)習(xí)要求個(gè)人認(rèn)為是達(dá)到掌握即可的程度。
二、什么是拖拽和釋放？
拖拽：Drag
釋放：Drop
拖拽指的是鼠標(biāo)點(diǎn)擊源對(duì)象后一直移動(dòng)對(duì)象不松手，一但松手即釋放了
三、什么是源對(duì)象和目標(biāo)對(duì)象？
源對(duì)象：指的是我們鼠標(biāo)點(diǎn)擊的一個(gè)事物，這里可以是一張圖片，一個(gè)DIV，一段文本等等。
目標(biāo)對(duì)象：指的是我們拖動(dòng)源對(duì)象后移動(dòng)到一塊區(qū)域，源對(duì)象可以進(jìn)入這個(gè)區(qū)域，可以在這個(gè)區(qū)域上方懸停(未松手)，可以釋松手釋放將源對(duì)象放置此處(已松手)，也可以懸停后離開(kāi)該區(qū)域。
四、拖拽API的相關(guān)函數(shù)
解釋了什么是源對(duì)象和目標(biāo)對(duì)象后，回歸前端中的拖拽API，由上面的操作我們可以得出幾個(gè)函數(shù)
被拖動(dòng)的源對(duì)象可以觸發(fā)的事件：
(1)ondragstart：源對(duì)象開(kāi)始被拖動(dòng)
(2)ondrag：源對(duì)象被拖動(dòng)過(guò)程中(鼠標(biāo)可能在移動(dòng)也可能未移動(dòng))
(3)ondragend：源對(duì)象被拖動(dòng)結(jié)束
拖動(dòng)源對(duì)象可以進(jìn)入到上方的目標(biāo)對(duì)象可以觸發(fā)的事件：
(1)ondragenter：目標(biāo)對(duì)象被源對(duì)象拖動(dòng)著進(jìn)入
(2)ondragover：目標(biāo)對(duì)象被源對(duì)象拖動(dòng)著懸停在上方
(3)ondragleave：源對(duì)象拖動(dòng)著離開(kāi)了目標(biāo)對(duì)象
(4)ondrop：源對(duì)象拖動(dòng)著在目標(biāo)對(duì)象上方釋放/松手
拖拽API總共就是7個(gè)函數(shù)?。?br/>五、如何在拖動(dòng)的源對(duì)象事件和目標(biāo)對(duì)象事件間傳遞數(shù)據(jù)

HTML5為所有的拖動(dòng)相關(guān)事件提供了一個(gè)新的屬性：
e.dataTransfer { } //數(shù)據(jù)傳遞對(duì)象
功能：用于在源對(duì)象和目標(biāo)對(duì)象的事件間傳遞數(shù)據(jù)

源對(duì)象上的事件處理中保存數(shù)據(jù)：
e.dataTransfer.setData( k, v ); //k-v必須都是string類型

目標(biāo)對(duì)象上的事件處理中讀取數(shù)據(jù)：
var v = e.dataTransfer.getData( k );