拖曳API是HTML5的新特性，相對於其他新特性來說，重要程度佔到6成，實際開發中使用比例占到3成，學習要求個人認為是達到掌握即可的程度。
二、什麼是拖曳和釋放？拖曳：Drag
釋放：Drop
拖曳指的是滑鼠點擊來源物件後一直移動物件不鬆手，一但鬆手即釋放了
三、什麼是來源物件和目標物件？來源物件：指的是我們滑鼠點擊的一個事物，這裡可以是一張圖片，一個DIV，一段文字等等。
目標物件：指的是我們拖曳來源物件後移動到一塊區域，來源物件可以進入這個區域，可以在這個區域上方懸停(未鬆手)，可以釋鬆手釋放將來源物件放置此處(已鬆手) ，也可以懸停後離開該區域。
四、拖曳API的相關函數解釋了什麼是來源物件和目標物件後，回歸前端中的拖曳API，由上面的運算我們可以得出幾個函數
被拖曳的來源物件可以觸發的事件：
(1)ondragstart：來源物件開始被拖曳
(2)ondrag：來源物件被拖曳過程中(滑鼠可能在移動也可能未移動)
(3)ondragend：來源物件被拖曳結束
拖曳來源物件可以進入到上方的目標物件可以觸發的事件：
(1)ondragenter：目標物件被來源物件拖曳進入
(2)ondragover：目標物件被來源物件拖曳著懸停在上方
(3)ondragleave：來源物件拖曳著離開了目標對象
(4)ondrop：來源物件拖曳著在目標物件上方釋放/鬆開手
拖曳API總共就是7個函數！ ！
五、如何在拖曳的來源物件事件和目標物件事件間傳遞數據HTML5為所有的拖曳相關事件提供了一個新的屬性：
e.dataTransfer { } //数据传递对象
功能：用於在來源物件和目標物件的事件間傳遞數據
在來源物件上的事件處理中保存資料：
e.dataTransfer.setData( k, v ); //kv必须都是string类型
目標物件上的事件處理中讀取資料：
var v = e.dataTransfer.getData( k );
範例一：實作一個可以隨著滑鼠拖曳而移動的小飛機
提示：飛機需要絕對定位！ ondrag事件中取得滑鼠的座標值！ ！ ！
程式碼如下：
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body{ margin:0; position: relative; } img{ position:absolute; } </style> </head> <body> <h3>隨著滑鼠拖曳而移動的小飛機</h3> <img id=p3 src=img/p3.png <script> p3.ondragstart=function(e){ console.log('事件來源p3開始拖曳'); //記錄剛一拖曳時，滑鼠在飛機上的偏移量offsetX= e.offsetX; offsetY= e.offsetY; } p3.ondrag=function(e){ console.log('事件來源p3拖曳中'); var x= e.pageX; var y= e.pageY; console.log(x+'-'+y); //drag事件最後一刻，無法讀取滑鼠的座標，pageX和pageY都變成0 if(x==0 && y==0){ return; //不處理拖曳最後一刻X和Y都為0的情形} x-=offsetX; y-=offsetY; p3.style.left=x+'px'; p3.style.top=y+'px'; } p3.ondragend=function(){ console.log('來源物件p3拖曳結束'); } </script> </body> </html>效果如下：
範例二：
模擬電腦中垃圾桶的效果， 總共顯示三個小飛機，拖曳著某個小飛機到垃圾桶上方後，小飛機從DOM樹上刪除
提示：刪除需要從DOM子節點中刪除元素，需要阻止ondragover的預設行為！ ！利用來源物件和目標物件的資料傳遞記錄小飛機的ID值！ ！ ！
重要訊息：
ondragover有一個預設行為！ ！ ！那就是當ondragover觸發時，ondrop會失效！ ！ ！ ！這個可能是瀏覽器的版本問題，需要以後瀏覽器不斷更新可能才會解決！ ！
如何阻止？
ondragover= function(e){ //來源物件在懸停在目標物件上時e.preventDefault(); //阻止預設行為，使得drop可以觸發.....}ondrop= function(e){ //來源物件鬆手釋放在了目標物件中.....}程式碼如下：
<!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> body { text-align: center; } #trash { opacity: .2; margin : 15px; } </style> </head> <body> <h3>拖曳飛機到垃圾桶後從DOM樹中移除子元素</h3> <img id=trash src=img/trash_full.png> <hr/> <img id=p3 class=src src=img/p3.png> <img id=p4 class=src src=img/p4.png> <img id=p4 class=src src=img/p4.png> <img id =p5 class=src src=img/p5.png> <script> //為來源物件新增事件監聽-記錄拖曳了哪一個來源物件var srcList = document.querySelectorAll('.src');//找到全部img元素for(var i=0; i<srcList.length; i++){ //遍歷img元素var p = srcList[i]; p.ondragstart = function(e){ //開始拖曳來源物件e.dataTransfer.setData('PlaneID',this.id);//儲存資料--該img元素的id } p.ondrag = function(){} p.ondragend = function() {} } //為目標物件新增事件監聽- 刪除拖曳的來源物件trash.ondragenter = function(){ //來源物件進入目標物件console.log('drag enter'); trash.style.opacity = 1; //將透明度變成1 } trash.ondragleave= function(){ //來源物件離開目標物件後console.log('drag leave'); trash.style.opacity = .2 ; //將透明度變成0.2 } trash.ondragover= function(e){ //來源物件在懸停在目標物件上時e.preventDefault(); //阻止預設行為，使得drop可以觸發} trash.ondrop= function(e){ //來源物件鬆手釋放在了目標物件中console.log('drop'); trash.style.opacity = .2; / /將透明度變成0.2 //刪除被拖曳的來源物件var id = e.dataTransfer.getData('PlaneID');//取得資料--id值var p = document.getElementById(id); //根據id值找到相關的元素p.parentNode.removeChild(p); //從父元素中刪除子節點} </script> </body> </html>效果如下：
拖曳小飛機到垃圾桶刪除後：
如圖，原本三架小飛機，現在變成了兩架！ ！ ！
六、拖曳API的補充知識點！ ！ （重要，面試中也許會問到噢！！）面試題：
如何在網頁中顯示客戶端(電腦)的一張圖片？
如何拖曳客戶端的網頁顯示在伺服器端下載的頁面中？
這兩個問題是什麼意思呢？
我們平常在電腦中拖曳一張圖片到瀏覽器中實現的下載操作！ ！ ！依照H5之前的標準，要實現直接拖曳一張圖片到瀏覽器中顯示是無法完成！ ！但是自從H5新特性出來後增加了拖曳API的特性，完美的實現了這項功能！ ！ ！
應用場合：
在某網站上，上傳圖片當做是頭像
上傳相片...
HTML5新增的檔案操作物件：
File： 代表一個文件對象
FileList： 代表一個文件列表對象，類別數組
FileReader：用於從文件中讀取數據
FileWriter：用於向文件中寫出數據
相關函數：
div.ondrop = function(e){var f = e.dataTransfer.files[0]; //找到拖放的檔案var fr = new FileReader(); //建立檔案讀取器fr.readAsURLData(f); //讀取檔案內容fr.onload = function(){ //讀取完成img.src = fr.result; //使用讀取到的資料} }程式碼如下：
<span style=font-size: 18px;><!DOCTYPE html> <html> <head lang=en> <meta charset=UTF-8> <title></title> <style> #container { border: 1px solid #aaa; border-radius: 3px; padding: 10px; margin: 10px; min-height: 400px; } </style> </head> <body> <h1>拖曳API的延伸知識</h1> <h3>請拖曳您的照片到下方方框區域</h3> <div id=container ></div> <script> //監聽document的drop事件-取消其預設行為：在新視窗中開啟圖片document.ondragover = function(e){ e.preventDefault(); //使得drop事件可以觸發} document.ondrop = function(e){ e.preventDefault(); //阻止在新視窗中開啟圖片，否則仍會執行下載操作！ ！ ！ } //監聽div#container的drop事件，設法讀取到釋放的圖片數據，顯示出來container.ondragover = function(e){ e.preventDefault(); } container.ondrop = function(e){ console.log ('客戶端拖曳著一張圖片釋放了...') //目前的目標物件讀取拖放來源物件儲存的資料//console.log(e.dataTransfer); //顯示有問題//console.log(e.dataTransfer.files.length); //拖進來的圖片的數量var f0 = e.dataTransfer.files[0]; //console.log(f0); / /檔案物件File //從檔案物件讀取資料var fr = new FileReader(); //fr.readAsText(f0); //從檔案讀取文字字串fr.readAsDataURL(f0); //從檔案中讀取URL資料fr.onload = function(){ console.log('讀取檔案完成') console.log(fr.result); var img = new Image(); img.src = fr .result; //URL資料container.appendChild(img); } } </script> </body> </html></span>效果如下：
總結以上所述是小編給大家介紹的HTML5拖曳API經典實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！