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>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。