draggable属性设置元素是否可拖动。
设置标签属性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