1.拖拽和釋放定義：
拖拽：Drag;
釋放：Drop;
2.源對象和目標對象：
3.相關API:
ondragstart:源對象開始被拖動
ondrag:源對象被拖動的過程中
ondragend:源對象被拖動結束
ondragenter:目標對象被源對象拖動進入
ondragover:目標對象被源對象懸浮在上面
ondragleave:源對象拖動着離開了目標對象
ondrop:源對象拖動着在目標對象上方松手
4.拖動的源對象和目標對象之間的數據傳遞：
源對象數據保存：e.data.Transfer.setData(k,v)//k-v必須都是string類型
目標對象獲取數據：e.data.Transfer.getData(k,v)
案例一：小貓咪隨着鼠標移動
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>拖動小熊</title> 6 <style> 7 body{ 8 margin:0; 9 position: relative; 10 } 11 img{ 12 position:absolute; 13 width: 150px; 14 height: 150px; 15 } 16 </style> 17 </head> 18 <body> 19 <h3>隨着鼠標拖動而移動的小貓咪</h3> 20 <img id="cat" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537438350926&di=d40ad5be9fac73fbcebfcbec85a88739&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D88c8f471f9039245a1e0e90bb2a488f4%2F9a504fc2d5628535aedbd09d95ef76c6a7ef6356.jpg" alt=""/> 21 <script> 22 var cat = document.getElementById('cat'); 23 cat.ondragstart = function(e){ 24 console.log('cat開始移動'); 25 offsetX = e.offsetX; 26 offsetY = e.offsetY; 27 }; 28 cat.ondrag = function(e){ 29 // console.log('事件源cat正在拖動中'); 30 var x = e.pageX; 31 var y = e.pageY; 32 console.log(x + '-' +y); 33 if(x === 0 && y === 0){//不處理最后一刻x,y都為0 的情景 34 return 35 }; 36 x -= offsetX; 37 y -= offsetY; 38 cat.style.left = x+ 'px'; 39 cat.style.top = y + 'px'; 40 } 41 cat.ondragend = function (e) { 42 console.jlog('cat源對象拖動結束') 43 } 44 </script> 45 </body> 46 </html>
案例二：淘寶購物車刪除商品效果：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>小喵咪喂給大黃魚</title> 6 <style> 7 body{ 8 text-align: center; 9 } 10 11 img{ 12 width: 80px; 13 height: 80px; 14 border-radius:100%; 15 } 16 #fish{ 17 margin-top: 200px; 18 opacity: .2; 19 } 20 </style> 21 </head> 22 <body> 23 <h3>小喵咪拖到大黃魚上面的時候消失（刪除小喵咪）</h3> 24 <img class="cat" id="cat1" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537439299088&di=4abcae9fe10a919fd23695be63506d91&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c2e05777054e0000012e7eceda20.jpg%401280w_1l_2o_100sh.jpg" alt=""> 25 <img class="cat" id="cat2" src="http://img4.imgtn.bdimg.com/it/u=2404190189,262583459&fm=26&gp=0.jpg" alt=""> 26 <img class="cat" id="cat3" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537439359473&di=94af89f7165210577af8d9682ca7b90b&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F031763d577b43b30000018c1bcaaa23.jpg" alt=""> 27 <br> 28 <img id="fish" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2614718913,3898275106&fm=26&gp=0.jpg" alt=""> 29 </body> 30 <script> 31 //要想從數據庫中刪除貓咪，就需要貓咪的圖片地址是后台傳值過來的，然后循環遍歷在頁面中，當拖動刪除的時候，刪除掉數據庫中的數據即可；然后刷新頁面 32 var cat = document.getElementsByClassName('cat')//找到所有的貓咪 33 for(var i = 0;i<cat.length;i++){ 34 var catSingle = cat[i]; 35 catSingle.ondragstart = function(e){//循環遍歷貓咪，當dragstart拖動開始的時候，setData設置他的id到e.dataTransfer中 36 e.dataTransfer.setData('catId',this.id); 37 } 38 } 39 fish.ondragenter = function(){//當如到魚種時候，讓魚的透明度為1； 40 console.log('已經拖入') 41 fish.style.opacity ='1'; 42 } 43 fish.ondragleave = function () {//拖動離開魚的時候 44 console.log('拖動離開'); 45 fish.style.opacity ='.2'; 46 } 47 fish.ondragover = function (e) {//拖動懸浮在魚上 48 e.preventDefault() 49 } 50 fish.ondrop = function(e){//拖動放開時候；獲取拖動開始時候設置的數據；然后從dom結構中移除； 51 console.log('放開拖動') 52 fish.style.opacity = '.2' 53 var id = e.dataTransfer.getData('catId') 54 console.log(id) 55 var dragId = document.getElementById(id); 56 dragId.parentNode.removeChild(dragId) 57 } 58 59 </script> 60 </html>
案例三：將本地圖片圖拖動放置到瀏覽器中
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>拖動一張圖片到瀏覽器中</title> 6 <style> 7 body{ 8 text-align: center; 9 } 10 #container { 11 border: 1px solid #aaa; 12 border-radius: 3px; 13 padding: 10px; 14 margin: 10px; 15 min-height: 400px; 16 } 17 </style> 18 </head> 19 <body> 20 21 <h1>拖放API的擴展知識</h1> 22 <h3>請拖動您的照片到下方方框區域</h3> 23 <div id="container"></div> 24 25 <script> 26 var container = document.getElementById('container') 27 document.ondragover = function(e){ 28 e.preventDefault() 29 } 30 document.ondrop = function(e){ 31 e.preventDefault() 32 } 33 container.ondragover = function(e){ 34 e.preventDefault() 35 } 36 container.ondrop = function(e){ 37 var paper = e.dataTransfer.files[0]; 38 var file = new FileReader(); 39 file.readAsDataURL(paper) 40 file.onload = function(){ 41 console.log('讀取文件完成') 42 console.log(file.result) 43 var img = new Image(); 44 img.src =file.result; 45 container.appendChild(img) 46 } 47 } 48 </script> 49 </body> 50 </html>
注意事項：瀏覽器問題：當ondragover觸發時，ondrop會失效，因此需要阻止ondragover的默認事件；
5.HTML5的新增文件操作對象
file:代表一個文件對象
filelist:代表一個文件列表對象；類數組；
fileReader:用於從文件中讀取數據
FileWriter:用於向文件中寫出數據；
相關函數：
1 div.ondrop = function(e){ 2 3 var f = e.dataTransfer.files[0]; //找到拖放的文件 4 5 var fr = new FileReader(); //創建文件讀取器 6 7 fr.readAsURLData(f); //讀取文件內容 8 9 fr.onload = function(){ //讀取完成 10 11 img.src = fr.result; //使用讀取到的數據 12 13 } 14 15 }