html5学习-拖拽

闲来无事，自己弄了一下html5的拖拽，毕竟比起js的拖拽方便了太多，现在把弄的一个小例子放上了，和大家分享一下。

  1 <!doctype html>
  2 <html lang="zh-cn">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <script type="text/javascript">
  7 
  8 
  9     window.onload=function(){
 10 
 11         var obj={};
 12 
 13         var ulbox=document.getElementById("ulbox");
 14         var oLi=ulbox.getElementsByTagName("li");
 15         var box=document.getElementById("box");
 16         
 17         for(var i=0,len=oLi.length;i<len;i++){
 18             
 19 
 20             oLi[i].ondragstart=function(ev){
 21                 var pbox=this.getElementsByTagName("p");
 22             
 23                 ev.dataTransfer.setData("title",pbox[0].innerHTML);
 24                 ev.dataTransfer.setData("money",pbox[1].innerHTML);
 25                 ev.dataTransfer.setDragImage(this,0,0);
 26 
 27 
 28             }
 29 
 30 
 31         }
 32 
 33         box.ondragover=function(ev){
 34 
 35                 ev.preventDefault();
 36 
 37         }
 38 
 39 
 40         box.ondrop=function(ev){
 41 
 42                 var tit=ev.dataTransfer.getData("title");
 43                 var money=ev.dataTransfer.getData("money");
 44 
 45                 if(!obj[tit]){
 46 
 47                         var  op=document.createElement("p");
 48 
 49                         var s3=document.createElement("span");
 50                         s3.className="s3";
 51                         s3.innerHTML=1;
 52                         op.appendChild(s3);
 53 
 54                         var s1=document.createElement("span");
 55                         s1.className="s1";
 56                         s1.innerHTML=tit;
 57                         op.appendChild(s1);
 58 
 59                         var s2=document.createElement("span");
 60                         s2.className="s2";
 61                         s2.innerHTML=money;
 62                         op.appendChild(s2);
 63 
 64                         box.appendChild(op);
 65 
 66                         obj[tit]=tit;
 67 
 68                 }else{
 69                         var sbox=document.getElementsByClassName("s1");
 70                         var tbox=document.getElementsByClassName("s3");
 71                         for(var i=0;i<sbox.length;i++){
 72                         
 73                             if(sbox[i].innerHTML==obj[tit])
 74 
 75                                  tbox[i].innerHTML= parseInt(tbox[i].innerHTML)+1;
 76 
 77 
 78                         }
 79 
 80                 }
 81 
 82                  ev.preventDefault();
 83                  ev.stopPropagation();
 84 
 85         }
 86 
 87 
 88 
 89 
 90     }
 91 
 92     </script>
 93 
 94     <style type="text/css">
 95        *{padding: 0; margin: 0}
 96        ul,li{ list-style: none;}
 97        .ulbox{ width: 100%; overflow: hidden; zoom:1;}
 98        .ulbox img{ width: 150px; height: 200px}
 99        .ulbox li{ float: left; width: 150px; height:250px; border:1px solid #000000; overflow: hidden; margin: 0 50px}
100        .ulbox p{ border-bottom: 1px dotted #999999; height: 25px; line-height: 25px}
101       .box{ width: 500px; border:1px solid #000000; margin: 50px; padding: 20px 0}
102       .box p{ height: 30px; line-height: 30px; border-bottom: 1px dotted #000000}
103       .s1{ float: left}
104       .s2{ float: right}
105       .s3{ float: left; padding: 0 10px; text-align: center; background: red; width: 30px; height: 30px}
106 
107 
108 
109 
110     </style>    
111 
112 
113 
114 </head>
115 <body>
116         <ul class="ulbox" id="ulbox">
117             <li draggable="true">
118                     <img src="images/11.jpg" />
119                     <p>图书NO.1</p>
120                     <p>135￥</p>
121 
122 
123             </li>
124             <li draggable="true">
125                     <img src="images/12.jpg" />
126                     <p>图书NO.2</p>
127                     <p>65￥</p>
128 
129 
130             </li>
131             <li draggable="true">
132                     <img src="images/13.jpg" />
133                     <p>图书NO.3</p>
134                     <p>15￥</p>
135 
136 
137             </li>
138 
139 
140         </ul>
141 
142 
143     <div class="box" id="box">
144         
145     </div>
146     
147 
148 
149 
150 
151 
152 
153 
154 
155 
156 
157 
158 
159 
160 
161 </body>
162 
163 
164 
165 </html>

 

posted @ 2013-12-16 10:36  梦飞无颜  阅读(351)  评论(0)  编辑  收藏  举报