2014.02.17 笔记 HTML5 拖放（Drag 和 drop）
HTML5 拖放（Drag 和 drop）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style type="text/css"> 5 #div1, #div2 6 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;} 7 </style> 8 <script type="text/javascript"> 9 function allowDrop(ev) 10 { 11 ev.preventDefault(); 12 } 13 14 15 function drag(ev) 16 { 17 ev.dataTransfer.setData("Text",ev.target.id); //方法中设置为相同类型的任何数据。被拖数据是被拖元素的 id ("drag1") 18 } 19 20 function drop(ev) 21 { 22 ev.preventDefault();//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） 23 var data=ev.dataTransfer.getData("Text"); //通过此方法获得被拖的数据。该方法将返回在 setData() 24 ev.target.appendChild(document.getElementById(data)); //把被拖元素追加到放置元素（目标元素）中 25 } 26 </script> 27 </head> 28 <body> 29 30 <!--ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。--> 31 <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 32 <img src="/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" /> 33 <!--为了使元素可拖动，把 draggable 属性设置为 true--> 34 </div> 35 <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 36 37 38 </body> 39 </html>
