學習網站：http://www.runoob.com/jsref/event-ondragend.html
定義和用法
ondragend 事件在用戶完成元素或首選文本的拖動時觸發。
拖放是 HTML5 中非常常見的功能。 更多信息可以查看我們 HTML 教程中的 HTML5 拖放。
注意： 為了讓元素可拖動，需要使用 HTML5 draggable 屬性。
提示： 鏈接和圖片默認是可拖動的，不需要 draggable 屬性。
在拖放的過程中會觸發以下事件：
- 在拖動目標上觸發事件 (源元素):
- ondragstart - 用戶開始拖動元素時觸發
- ondrag - 元素正在拖動時觸發
- ondragend - 用戶完成元素拖動后觸發
- 釋放目標時觸發的事件:
- ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件
- ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
- ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件
- ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
瀏覽器支持
表格中的數字表示支持該事件的第一個瀏覽器的版本號。IE9兼容
語法
HTML 中：
<element ondragend="myScript">
嘗試一下
JavaScript 中：
object.ondragend=function(){myScript};
嘗試一下
JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener("dragend", myScript);
嘗試一下
注意： Internet Explorer 8 及更早 IE 版本不支持 addEventListener() 方法。
實例運行：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鳥教程(runoob.com)</title> 6 <style> 7 .droptarget { 8 float: left; 9 width: 100px; 10 height: 35px; 11 margin: 15px; 12 padding: 10px; 13 border: 1px solid #aaaaaa; 14 } 15 </style> 16 </head> 17 <body> 18 19 <p>在兩個矩形框中來回拖動 p 元素:</p> 20 <div class="droptarget"> 21 <p draggable="true" id="dragtarget">拖動我!</p> 22 </div> 23 <div class="droptarget"></div> 24 <p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的瀏覽器不支持 drag 事件。</p> 25 <p id="demo"></p> 26 <script> 27 /* 拖動時觸發*/ 28 document.addEventListener("dragstart", function(event) { 29 //dataTransfer.setData()方法設置數據類型和拖動的數據 30 event.dataTransfer.setData("Text", event.target.id); 31 // 拖動 p 元素時輸出一些文本 32 document.getElementById("demo").innerHTML = "開始拖動 p 元素."; 33 //修改拖動元素的透明度 34 event.target.style.opacity = "0.4"; 35 }); 36 //在拖動p元素的同時,改變輸出文本的顏色 37 document.addEventListener("drag", function(event) { 38 document.getElementById("demo").style.color = "red"; 39 }); 40 // 當拖完p元素輸出一些文本元素和重置透明度 41 document.addEventListener("dragend", function(event) { 42 document.getElementById("demo").innerHTML = "完成 p 元素的拖動"; 43 event.target.style.opacity = "1"; 44 }); 45 /* 拖動完成后觸發 */ 46 // 當p元素完成拖動進入droptarget,改變div的邊框樣式 47 document.addEventListener("dragenter", function(event) { 48 if ( event.target.className == "droptarget" ) { 49 event.target.style.border = "3px dotted red"; 50 } 51 }); 52 // 默認情況下,數據/元素不能在其他元素中被拖放。對於drop我們必須防止元素的默認處理 53 document.addEventListener("dragover", function(event) { 54 event.preventDefault(); 55 }); 56 // 當可拖放的p元素離開droptarget，重置div的邊框樣式 57 document.addEventListener("dragleave", function(event) { 58 if ( event.target.className == "droptarget" ) { 59 event.target.style.border = ""; 60 } 61 }); 62 /*對於drop,防止瀏覽器的默認處理數據(在drop中鏈接是默認打開) 63 復位輸出文本的顏色和DIV的邊框顏色 64 利用dataTransfer.getData()方法獲得拖放數據 65 拖拖的數據元素id(“drag1”) 66 拖拽元素附加到drop元素*/ 67 document.addEventListener("drop", function(event) { 68 event.preventDefault(); 69 if ( event.target.className == "droptarget" ) { 70 document.getElementById("demo").style.color = ""; 71 event.target.style.border = ""; 72 var data = event.dataTransfer.getData("Text"); 73 event.target.appendChild(document.getElementById(data)); 74 } 75 }); 76 </script> 77 78 </body> 79 </html>
效果：
