2014.02.17 笔记 HTML5 拖放（Drag 和 drop）

浏览数：39 / 时间：2015年06月09日

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>