一、關於拖拽api
拖拽api是html5的新特性，相對於其他新特性來說，重要程度佔到6成，實際開發中使用比例佔到3成，學習要求個人認為是達到掌握即可的程度。
二、什麼是拖拽和釋放？
拖拽：drag
釋放：drop
拖拽指的是滑鼠點選源物件後一直移動物件不鬆手，一但鬆手即釋放了
三、什麼是源物件和目標物件？
源物件：指的是我們滑鼠點選的乙個事物，這裡可以是一張，乙個div，一段文字等等。
目標物件：指的是我們拖動源物件後移動到一塊區域，源物件可以進入這個區域，可以在這個區域上方懸停(未鬆手)，可以釋鬆手釋放將源物件放置此處(已鬆手)，也可以懸停後離開該區域。
四、拖拽api的相關函式
解釋了什麼是源物件和目標物件後，回歸前端中的拖拽api，由上面的操作我們可以得出幾個函式
被拖動的源物件可以觸發的事件：
(1)ondragstart：源物件開始被拖動
(2)ondrag：源物件被拖動過程中(滑鼠可能在移動也可能未移動)
(3)ondragend：源物件被拖動結束
拖動源物件可以進入到上方的目標物件可以觸發的事件：
(1)ondragenter：目標物件被源物件拖動著進入
(2)ondragover：目標物件被源物件拖動著懸停在上方
(3)ondragle**e：源物件拖動著離開了目標物件
(4)ondrop：源物件拖動著在目標物件上方釋放/鬆手
拖拽api總共就是7個函式！！
五、如何在拖動的源物件事件和目標物件事件間傳遞資料
html5為所有的拖動相關事件提供了乙個新的屬性：
e.datatransfer //資料傳遞物件
功能：用於在源物件和目標物件的事件間傳遞資料
源物件上的事件處理中儲存資料：
e.datatransfer.setdata( k, v ); //k-v必須都是string型別
目標物件上的事件處理中讀取資料：
var v = e.datatransfer.getdata( k );
示例一：實現乙個可以隨著滑鼠拖動而移動的小飛機
提示：飛機需要絕對定位！ondrag事件中獲取滑鼠的座標值！！！
**如下：
效果如下：
示例二：
模擬電腦中 」垃圾桶「的效果， 總共顯示三個小飛機，拖動著某個小飛機到垃圾桶上方後，小飛機從dom樹上刪除
提示：刪除需要從dom子節點中刪除元素，需要阻止ondragover的預設行為！！利用源物件和目標物件的資料傳遞記錄小飛機的id值！！！
重要資訊：
ondragover有乙個預設行為！！！那就程式設計客棧是當ondragover觸發時，ondrop會失效！！！！這個可能是瀏覽器的版本問題，需要以後瀏覽器不斷更新可能才會解決！！
如何阻止？
ondragover= function(e)
ondrop= function(e)
**如下：
效果如下：
拖拽小飛機到垃圾桶刪除後：
如圖，原本三架小飛機，現在變成了兩架！！！
六、拖拽api的補充知識點！！（重要，面試中也許會問到噢！！）
面試題：
如何在網頁中顯示客戶端(電腦)的一張？
如何拖動客戶端的網頁顯示在伺服器端**的頁面中？
這兩個問題是什麼意思呢？
我們平時在電腦中拖拽一張到瀏覽器中實現的**操作！！！按照h5之前的標準，要實現直接拖拽一張到瀏覽器中顯示是無法完成！！但是自從h5新特性出來之後增加了拖拽api的特性，完美的實現了這一功能！！！
應用場合：
在某**上，上傳當做是頭像
上傳相片...
html5新增的檔案操作物件：
file： 代表乙個檔案物件
filelist： 代表乙個檔案列表物件，類陣列
filereader：用於從檔案中讀取資料
filewriter：用於向檔案中寫出資料
相關函式：
div.ondrop = function(e)
}**如下：
效果如下：
總結本文標題: html5拖拽api經典例項詳解
本文位址: /web/html5/22964.html
html5拖拽 初探
先看看效果 完整測試 html5 拖拽 box 接下來對 進行一一講解 drag的英譯是 拖 拽 drop的意思是 放下 drag和drop 是html5中新增的特性，任何元素都能夠拖放 大部分主流瀏覽器目前也夠支援html5的拖放功能。1.我們想要拖動那個元素，首先要把這個元素設定成可拖拽，將該元...
HTML5之拖拽功能
預設可拖動元素 draggable屬性 其他元素該屬性值為true，則可被拖動。chrome 可直接顯示拖動效果 firefox 需要為ondragstart事件指定 攜帶資料，才能顯示拖動效果。dragelement.ondragstart function evt 阻止放置物件的預設 drope...
html5 約束驗證API
html5 約束驗證api 主要有如下幾個 willvalidate 屬性 validity 屬性 validationmessage 屬性 checkvalidity 方法 setcustomvalidity 方法 validity 屬性 顯示各項是否符合驗證條件 示例 控制台顯示 validat...