系列文章
一、瞎扯
最近在折騰人工智能，今天寫了段tensorflow，用來分辨手寫字體的圖片，跑的時間有點久，所以就跑回來跟前端玩耍了，其實代碼早就寫好了，只是補上文章。
Html5的很多特性十分激動人心，比如這里的拖拽功能，還有websockeet，從此網(wǎng)頁聊天程序就能更輕松的編寫出來，再有就是canvas，于是撼動了flash長久的統(tǒng)治地位，H5還開始進(jìn)入手機APP領(lǐng)域，開始在制作APP的不歸路上越走越遠(yuǎn)了。
H5的拖拽十分好用，玩過js拖拽的人知道，在那里，拖拽的效果什么的都需要自己實現(xiàn)，十分地麻煩和復(fù)雜，但是在H5中都予以了封裝，連移動效果都有，相當(dāng)不錯，簡化了開發(fā)，不過事實上，對于深入學(xué)習(xí)并不利，因此想要深入理解原理的小伙伴們建議去實現(xiàn)一下js版本的拖拽。
跟JS版本的原理一樣，H5的拖拽也分為三個步驟，開始拖拽，拖拽時，拖拽后
前提：拖拽的元素要寫上draggable="true"的標(biāo)簽
1、拖拽元素的?ondragstart，里面寫的代碼表示開始拖拽的時候發(fā)生的事
2、拖放元素所處位置的ondragover，比如拖拽一個img到div上方額，就會觸發(fā)div的這個事件
3、拖放元素所處位置的ondrop，里面寫的代碼表示放置后所觸發(fā)的事件
很多人肯定會問，那該如何傳遞數(shù)據(jù)呢，這里H5也考慮到了，在這里可以通過dataTransfer來傳遞數(shù)據(jù)
這里借用W3CSCHOOL中的例子來說明，
functiondragStart(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
這里其實就是利用setData傳遞一個文本格式的參數(shù)（拖拽元素的id）
functiondrop(ev)
{
ev.preventDefault();
vardata=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
這里則是通過getData來獲取這個參數(shù)。大吃一驚了吧，方便到爆了。
因為這個html5拖拽很簡單，因此本文其實著重想講解一下這個dataTransfer。（其實也就是官方api上抄來的而已，哈哈哈哈，不要見怪，我也不敢瞎造?。?/p>
Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be none copy link or move.
獲取或者設(shè)置當(dāng)前被選擇元素的拖拽類型，它的值必須為none、copy、link、或者move
Provides all of the types of operations that are possible. Must be one ofnone,copy,copyLink,copyMove,link,linkMove,move,alloruninitialized.
提供所有可能的操作種類，必須是none,copy,copyLink,copyMove,link,linkMove,move,all或者uninitialized.中的一個。
Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.
包含一組可獲取的本地文件列表，如果拖拽操作不包含文件，則這個文件列表將會是空的。這個屬性超棒，很多拖拽上傳功能就是這樣子開發(fā)出來的
DataTransfer.items? ??Read only
Gives aDataTransferItemListobject which is a list of all of the drag data.
只讀，給定一個DataTransferItemList的對象，其中包含了一個所有拖拽數(shù)據(jù)的列表。
DataTransfer.typesRead only
An array ofstringgiving the formats that were set in thedragstartevent.
只讀，一組字符串?dāng)?shù)組，給定了在dragstart事件中設(shè)置的一組格式。
void dataTransfer.clearData([format]);
Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.
清除給定類別的數(shù)據(jù)，type這個參數(shù)是可選的，如果類別是空或者不明確，跟所有類別相關(guān)的數(shù)據(jù)都將清除掉，如果特定類別的數(shù)據(jù)不存在，或者dataTransfer不包含數(shù)據(jù)，則這個方法將沒有任何效果。
DOM String?dataTransfer.getData(format);
Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.
取回給定類別的數(shù)據(jù)，如果給定類別的數(shù)據(jù)不存在或者dataTransfer不包含任何數(shù)據(jù)，則將返回一個空字符串。
Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.
設(shè)置一個給定類別的數(shù)據(jù)，如果這個類別的數(shù)據(jù)不存在，則將被添加到末尾，因此這個類別的列表的最后一項將是一個新的格式，如果這個類別已經(jīng)存在，則存在的數(shù)據(jù)將被取代為這個新的數(shù)據(jù)
void dataTransfer.setDragImage(img,?xOffset,?yOffset);
Set the image to be used for dragging if a custom one is desired. ? ? ?
設(shè)置拖拽的時候顯示的圖片（默認(rèn)是拖拽元素的縮略圖）
https://github.com/wlmnzf/javascript-train/tree/master/customForm
3、太興奮的時候要聽傷感的歌，感謝 網(wǎng)易云音樂 --《島歌》
