在 HTML5 中，拖放是標準的一部分，即抓取對象以後拖到另一個位置(添加已定義好的父級元素里)，任何元素都能夠拖放。 瀏覽器支持 Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 *註釋：在 Safari 5.1.2 中不支 ...
在 HTML5 中，拖放是標準的一部分，即抓取對象以後拖到另一個位置(添加已定義好的父級元素里)，任何元素都能夠拖放。
瀏覽器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
*註釋：在 Safari 5.1.2 中不支持拖放。
1、設置元素為可拖放
讓元素可拖動，把 draggable 屬性設置為 true 。
eg:
<p id="txt" draggable="true">拖拽文字</p>
2、拖動什麼 - ondragstart 和 setData()
然後，規定當元素被拖動時，會發生什麼。
ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。
<p id="txt" draggable="true" ondragstart="drag(event)">拖拽文字</p>
dataTransfer.setData() 方法設置被拖數據的數據類型和值。
1 function drag(e1){
2 e1.dataTransfer.setData('text',e1.target.id);
3 }
*數據類型是 "Text"，值是可拖動元素的 id ("drag1")。
3、放到何處 - ondragover
ondragover 事件規定在何處放置被拖動的數據。
預設地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的預設處理方式。
這要通過調用 ondragover 事件的 event.preventDefault() 方法。
4、進行放置 - ondrop
當放置被拖數據時，會發生 drop 事件。
ondrop 屬性調用了一個函數，drop(event)。
html :
<div id="box" style="height: 200px; border:2px solid deeppink;" ondrop="drop(event)" ondragover="allow(event)"></div>
js:
1 function allow(e){
2 e.preventDefault();
3 }
4 function drop(e){
5 var tag=e.dataTransfer.getData('text'); document.getElementById('box').appendChild(document.getElementById(tag))
6 }
View Code
HTML5拖放示例
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <div id="box" style="height: 200px; border:2px solid deeppink;" ondrop="drop(event)" ondragover="allow(event)">
9 </div>
10 <p id="txt" draggable="true" ondragstart="drag(event)">拖拽文字（添加已定義好的父級元素里）（功能一般為清除的垃圾箱）</p>
11
12 <script type="text/javascript">
13 function drag(e1){
14 e1.dataTransfer.setData('text',e1.target.id);
15 }
16 function allow(e){
17 e.preventDefault();
18 }
19 function drop(e){
20 var tag=e.dataTransfer.getData('text');
21 document.getElementById('box').appendChild(document.getElementById(tag))
22 }
23 </script>
24 </body>
25 </html>
View Code
代碼解釋：
- 調用 preventDefault() 來避免瀏覽器對數據的預設處理（drop 事件的預設行為是以鏈接形式打開）
- 通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
- 被拖數據是被拖元素的 id ("drag1")
- 把被拖元素追加到放置元素（目標元素）中
轉自：w3school.com
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Title</title> 5 <meta charset="utf-8"> 6 <style> 7 #draggable { 8 width: 200px; 9 height: 20px; 10 text-align: center; 11 background: white; 12 margin: 0 auto; 13 } 14 .dropzone { 15 box-sizing: border-box; 16 width: 400px; 17 height: 60px; 18 background: blueviolet; 19 margin: 10px auto; 20 padding: 20px; 21 } 22 </style> 23 </head> 24 <body> 25 <!--dropzone:表示可釋放的區域--> 26 <div class="dropzone"> 27 <!--可拖動的元素 draggable="true"--> 28 <div id="draggable" draggable="true" > 29 來拖動我啊 30 </div> 31 </div> 32 <div class="dropzone"></div> 33 <div class="dropzone"></div> 34 <div class="dropzone"></div> 35 36 37 <script> 38 /*儲存拖動的目標*/ 39 var dragged; 40 41 42 /*開始拖動的時觸發。 只觸發一次*/ 43 document.addEventListener("dragstart", function (event) { 44 // console.log("開始拖動了"); 45 // 保存被拖動的元素對象 46 dragged = event.target; 47 // 把拖動元素的該成半透明。 48 event.target.style.opacity = .3; 49 }, false); 50 51 /* 拖動的過程中觸發。 只要元素在拖動，會一直重覆觸發 */ 52 document.addEventListener("drag", function (event) { 53 // console.log("被拖的感覺真爽") 54 }, false); 55 56 /*進入另外一個元素的區域時觸發*/ 57 document.addEventListener("dragenter", function (event) { 58 // 判斷當前的目標是否進入了潛在的 dropzone區域，如果是則高量這個潛在的目標區域 59 if (event.target.className == "dropzone") { 60 // console.log("進入潛在的目標區域"); 61 event.target.style.background = "purple"; 62 } 63 64 }, false); 65 66 /* 在潛在目標區域的上方的時候會重覆觸發 */ 67 document.addEventListener("dragover", function (event) { 68 // console.log("在潛在的目前區域上方"); 69 // 因為預設情況下，拖放目標是不允許接受元素的。阻值預設行為，可以隨時是否元素。 70 event.preventDefault(); //必須阻止預設行為，否則的後面的drop事件不會觸發 71 }, false); 72 73 /*鬆開滑鼠拖放結束。*/ 74 document.addEventListener("dragend", function (event) { 75 console.log("拖放結束"); 76 // 把元素的透明重新設置為1 77 event.target.style.opacity = "1"; 78 }, false); 79 80 /*從潛在目標元素上方離開的時候觸發*/ 81 document.addEventListener("dragleave", function (event) { 82 console.log("離開目標元素"); 83 // 因為進入一個元素的時候更改了目標元素的北京，所以離開的時候要重置背景 84 if (event.target.className == "dropzone") { 85 event.target.style.background = ""; 86 } 87 88 }, false); 89 90 /*釋放拖動元素的時候觸發。 這個事件是在dropend事件觸發前觸發。*/ 91 document.addEventListener("drop", function (event) { 92 console.log("drog....."); 93 // prevent default action (open as link for some elements) 94 event.preventDefault(); 95 // 把拖動的元素移動目標區域中 96 if (event.target.className == "dropzone") { 97 event.target.style.background = ""; 98 //把拖動元素從他原來的父節點中移除。 99 dragged.parentNode.removeChild(dragged); 100 //插入到目標元素中。 101 event.target.appendChild(dragged); 102 } 103 104 }, false); 105 </script> 106 </body> 107 </html>eg2
轉自：完善飛躍
拓展學習--經典例子：
HTML5--拖拽API(含超經典例子)：http://blog.csdn.net/baidu_25343343/article/details/53215193
HTML5——拖拽相關API及其他學習分享
1、HTML5 Sortable 是一個輕量級排序插件，使用原生的 HTML5拖放 API 創建排序列表和網格。
2、 Draggabilly 是一個很小的 JavaScript 庫，只需要簡單的設置參數就可以在你的網站用添加拖放功能。相容 IE8+ 瀏覽器，支持多點觸摸。可以靈活綁定事件，支持 RequireJS 以及 Bower 安裝。中文可參照：http://blog.csdn.net/auven_zj/article/details/74611887。
4、11個好用的jQuery拖拽拖放插件 2017-11-08
