Html5拖拽效果

之前有稍微了解过一般拖拽效果的实现方式，今天群里有人问html5拖拽的问题，觉得挺有意思，写了个小例子放上来。

html5的拖拽方法被封装的很好，看了w3school的总结，关键点如下：

设置元素为可拖拽，dragable=true；
开始拖拽时，目标触发 ondragstart事件，同时事件的dataTransfer属性可以用来存放和读取被拖拽元素的数据；
放在哪儿，ondragover设置在何处放置被拖动的物体；
放下时触发ondrop事件。

需要注意的是，有一些场景需要我们来阻止默认行为，比如图片的拖动，将拖拽物体放置到其他元素上等。

标准浏览器：preventDefault();

IE：returnValue=true;

小例子如下，可通过 http://1.interviewcases.sinaapp.com/couple.html 访问~

 1 <!DOCTYPE html>
 2 <html>
 3  <head>
 4   <title> 找盆友 </title>
 5  <meta http-equiv="Content-Type" content="text/xhtml;charset=utf-8"/>
 6   <style>
 7     .wrapper{
 8         width:960px;
 9         margin:0 auto;
10         position:relative;
11     }
12     .boys{
13         width:200px;
14         position:absolute;
15         left:0;
16         top:0;
17     }
18     .boys ul{
19         margin:0;
20         padding:0;
21     }
22     .boys ul li{
23         border:solid 1px;
24         height:230px;
25         list-style:none;
26         text-align:center;
27     }
28     .girls{
29         margin-left:220px;
30         height:600px;
31     }
32     .girls ul li{
33         border:solid 1px;
34         width:500px;
35         list-style:none;
36         text-align:center;
37         height:230px;
38     }
39   </style>
40   
41  </head>
42 
43  <body>
44     <h1>给男ds们找个女盆友吧！</h1>
45     <div class="wrapper">
46         <div class="boys">
47             <ul>
48                 <li><img src="images/boy1.jpg" dragable="true" ondragstart="drag(event)" id="boy1"/></li>
49                 <li><img src="images/boy2.jpg" dragable="true" ondragstart="drag(event)" id="boy2"/></li>
50                 <li><img src="images/boy3.jpg" dragable="true" ondragstart="drag(event)" id="boy3"/></li>
51             </ul>
52         </div>
53         <div class="girls" id="girls">
54             <ul ondragover="allowdrop(event)" ondrop="drop(event)">
55                 <li><img src="images/girl1.jpg"/></li>
56                 <li><img src="images/girl2.jpg"/></li>
57                 <li><img src="images/girl3.jpg"/></li>
58             </ul>
59         </div>
60    </div>
61    <script>
62     function drag(event){
63         event.dataTransfer.setData("id",event.target.id);
64     }
65     function allowdrop(event){
66         event.preventDefault();
67     }
68     function drop(event){
69         event.preventDefault();
70         var id=event.dataTransfer.getData("id");
71         event.target.appendChild(document.getElementById(id));
72     }
73   </script>
74  </body>
75 </html>

页面效果：

把左边的男生拖放到右边女生所在的格子里。

图片是网上找的，如有侵权，请及时联系我哈~

posted on 2013-12-06 20:03 晴舞阅读(1555) 评论(0) 编辑收藏举报