設置標簽屬性draggable="true"將一個標簽內的元素拖動到另外一個標簽進行顯示：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style type="text/css"> 5 #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 6 </style> 7 <script type="text/javascript"> 8 function allowDrop(ev) 9 { 10 ev.preventDefault(); 11 } 12 13 function drag(ev) 14 { 15 ev.dataTransfer.setData("Text",ev.target.id); 16 } 17 18 function drop(ev) 19 { 20 var data=ev.dataTransfer.getData("Text"); 21 ev.target.appendChild(document.getElementById(data)); 22 ev.preventDefault(); 23 } 24 </script> 25 </head> 26 <body> 27 28 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 29 <br /> 30 <p id="drag1" draggable="true" ondragstart="drag(event)">這是一段可移動的段落。請把該段落拖入上面的矩形。進行測試</p> 31 32 </body> 33 </html>
注意：鏈接和圖像標簽默認是可拖動的
其它標簽默認是不可以推動的
更多詳細介紹：http://www.w3school.com.cn/html5/att_global_draggable.asp
效果演示地址：
1、http://www.w3school.com.cn/tiy/t.asp?f=html5_global_draggable