html5 - drag 拖拽

参考资料：

　　　张鑫旭 :　http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/

　　 ^_^肥仔John ： http://www.cnblogs.com/fsjohnhuang/p/3961066.html

　　 File API ： http://www.ibm.com/developerworks/cn/web/1101_hanbf_fileupload/

浏览器内拖拽

Demo : Demo

浏览器内拖拽Demo截图：

代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7     *{ margin:0;padding:0; }
  8     li{ list-style: none; }
  9     .cr:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
 10     .cr{*zoom:1;}
 11 
 12     .conter{ width:900px; margin:0 auto; }
 13     .left{ float: left;width:420px;}
 14     .right{ float:right;width:420px; }
 15     .left h2{margin-top:50px}
 16     .ul{ margin:50px 0;  }
 17     .ul li{ height:30px;line-height:30px; font-size: 14px; text-align: center; border:1px solid #333; margin-top:-1px; }
 18     .remove{  }
 19     .remove .ul{ margin:0;min-height: 60px; border:1px solid #333; }
 20     .ul.auto{ min-height:30px; border:none; }
 21     .img{ position: absolute;left:0;top:0px;}
 22     </style>
 23     <script>
 24     window.onload = function(){
 25 
 26         var oUl = document.getElementById('ul');
 27         var aLis = null;
 28         var oRemove = document.getElementById('remove');
 29         var oImg = document.getElementById('img');
 30         var oUl2 = document.getElementById('ul2');
 31         var arrTop;
 32         var lastT = 0;
 33         var btn = false;
 34 
 35         setLiTop();
 36 
 37         function setLiTop (){
 38 
 39             arrTop = [];
 40             btn = false;
 41             aLis = oUl.getElementsByTagName('li');
 42 
 43             for( var i=0;i<aLis.length;i++ ){
 44 
 45                 aLis[i].index = i;
 46 
 47                 var top = aLis[i].offsetTop;
 48 
 49                 arrTop.push( top );
 50 
 51             }
 52 
 53             for( var i=0;i<aLis.length;i++ ){
 54 
 55                 aLis[i].ondragstart = function( ev ){
 56 
 57                     var ev = window.event || ev;
 58 
 59                     this.style.background = '#ccc';
 60 
 61                     var t = -this.offsetHeight/2;
 62 
 63                     var l = -this.offsetWidth/2;
 64 
 65                     ev.dataTransfer.setData('index',this.index); // 设置数据,可以看成一个json;
 66 
 67                     ev.dataTransfer.effectAllowed  = 'move'; //设置鼠标样式
 68 
 69                     ev.dataTransfer.setDragImage(oImg,oImg.offsetWidth/2,0); //设置托转出的假图片企业也没多大用 详细文章：http://blog.csdn.net/isaisai/article/details/39892427 
 70 
 71                 }
 72                 
 73                 aLis[i].ondragover = function( ev ){
 74 
 75                     var ev = window.event || ev;
 76 
 77                     lastT = this.offsetTop;
 78 
 79                     ev.preventDefault();
 80 
 81                 }
 82                 
 83                 aLis[i].ondragend = function( ev ){
 84 
 85                     this.style.background = '';
 86 
 87                     var ev = window.event || ev;
 88 
 89                 
 90                     for( var i=0,len=aLis.length;i<len;i++ ){
 91 
 92                         if( lastT == arrTop[i] ){
 93 
 94                             if( !btn ){
 95                                 
 96                                 if( i == 0){
 97                                  
 98                                     oUl.insertBefore( this, aLis[i] );
 99                                 
100                                 }else{
101 
102                                     oUl.insertBefore( this, aLis[i+1] );
103 
104                                 }
105                                 
106                                 setLiTop();
107 
108                             }
109                         }
110                     }
111 
112                     setLiTop();
113 
114                 }
115 
116             }    
117 
118         }
119         
120         
121         oUl2.ondragenter = function(){
122 
123             this.style.backgroundColor = 'red';
124             btn = true;
125 
126         }
127 
128         
129 
130         oUl2.ondragover = function(ev){
131 
132             var ev = window.event || ev;
133             ev.preventDefault();
134 
135         }
136         
137         oUl2.ondragleave = function(){
138         
139             this.style.background = '';
140 
141             btn = false;
142             
143         };
144 
145         oUl2.ondrop = function(ev){
146 
147             this.className = 'ul auto';
148 
149             var index =  parseInt( ev.dataTransfer.getData('index') ); // 取数据
150 
151             var oLi = document.createElement('li');
152 
153             oLi.innerHTML = aLis[index].innerHTML;
154 
155             oUl.removeChild(aLis[index]);
156 
157             oUl2.appendChild( oLi );
158 
159             this.style.background = '';
160             
161         }
162 
163 
164     }
165 
166 
167     </script>
168 </head>
169 <body>
170     <div class="conter cr">
171         <div class="left">
172             <h2>
173                 删除列表
174             </h2>
175             <div class="remove" id="remove">
176                 <ul class="ul" id="ul2">
177 
178                 </ul>
179             </div>
180         </div>
181 
182         <div class="right">
183 
184             <ul class="ul" id="ul">
185                 <li draggable="true">
186                     音乐播放列表1
187                 </li>
188                 <li draggable="true">
189                     音乐播放列表2
190                 </li>
191                 <li draggable="true">
192                     音乐播放列表3
193                 </li>
194                 <li draggable="true">
195                     音乐播放列表4
196                 </li>
197                 <li draggable="true">
198                     音乐播放列表5
199                 </li>
200                 <li draggable="true">
201                     音乐播放列表6
202                 </li>
203                 <li draggable="true">
204                     音乐播放列表7
205                 </li>
206             </ul>
207             <img id="img" src="http://static.cnblogs.com/images/logo_small.gif" alt="" >
208         </div>
209         
210     </div>
211 
212     
213 </body>
214 </html>

View Code

外部拖拽

Demo : Demo

外部拖拽Demo截图：

代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style>
  7     *{ margin:0;padding:0; }
  8     li{ list-style: none; }
  9     .cr:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
 10     .cr{*zoom:1;}
 11 
 12     .conter{ width:202px; margin:100px auto; }
 13     p{ margin:10px auto; text-align: center;}
 14     .box{  width:200px;height:200px; margin:0 auto; border:1px solid #ccc; line-height: 200px; font-size:20px; text-align: center; }
 15     .show-img{ width:950px; margin:0 auto; }
 16     .show-img img{ display: block; max-width: 950px; margin:0 auto;}
 17     </style>
 18     <script>
 19     window.onload = function(){
 20 
 21         var oBox = document.getElementById('box');
 22         var oShow = document.getElementById('show');
 23 
 24         oBox.ondragenter = function( ev ){
 25 
 26             this.innerHTML = '释放';
 27 
 28         }
 29 
 30         oBox.ondragleave = function(){
 31         
 32             this.innerHTML = '请将文件拖拽到区域';
 33             
 34         };
 35 
 36         oBox.ondragover = function(ev){
 37         
 38             ev.preventDefault();
 39             
 40         };
 41 
 42         oBox.ondrop = function( ev ){
 43             var ev = window.event || ev;
 44             var fs = ev.dataTransfer.files; // 获取拖拽的文件列表
 45             console.log( ev.dataTransfer.files[0] );
 46             for( var i=0,len=ev.dataTransfer.files.length;i<len;i++ ){
 47                 
 48                 // 判断 上传类型是否为图片;
 49                 if( fs[i].type.indexOf('image')!= -1 ){  
 50 
 51                     var fr = new FileReader(); //文件对象
 52                     var n = i;
 53 
 54                     fr.onload = function(){ //当文件读取成功就会触发onload事件
 55 
 56                              var oP = document.createElement('p');
 57                              oP.innerHTML = '文件名：' + fs[n].name + '||文件大小：' + bytesToSize(fs[n].size);
 58                              oShow.appendChild( oP );
 59 
 60                              var oImg = document.createElement('img');
 61                              oImg.src = this.result;//读取的文件信息
 62                              oShow.appendChild( oImg );
 63 
 64                     };
 65                     
 66                     fr.readAsDataURL(fs[i]);  //读取数据
 67 
 68                 }
 69 
 70                 // 判断 上传类型是否为txt;
 71                 if( fs[i].type.indexOf('text')!= -1 ){
 72                     var oP = document.createElement('p');
 73                      oP.innerHTML = '文件名：' + fs[i].name + '||文件大小：' + bytesToSize(fs[i].size);
 74                      oShow.appendChild( oP );
 75                 }
 76                  
 77              }
 78 
 79             this.innerHTML = '请将文件拖拽到区域';
 80             ev.preventDefault();
 81 
 82 
 83         }
 84 
 85         // 返回文件大小 代码出处:http://blog.csdn.net/lilinoscar/article/details/40825997
 86         function bytesToSize( bytes ) {  
 87 
 88            if (bytes === 0) return '0 B';  
 89       
 90             var k = 1024;  
 91       
 92             sizes = ['B','KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];  
 93       
 94             i = Math.floor(Math.log(bytes) / Math.log(k));  
 95           
 96             return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];   
 97               
 98         }  
 99 
100     }
101     </script>
102 </head>
103 <body>
104 
105     <div class="conter">
106         <p>只做了图片/txt</p>
107         <div class="box" id="box">
108             请将文件拖拽到区域
109         </div>
110         
111 
112     </div>
113     <div class="show-img" id="show">
114             
115     </div>
116 
117 </body>
118 </html>

View Code

后记:

第一个demo:

drag 的执行顺序：dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend （很重要~）

event.dataTransfer.effectAllowed 设置鼠标样式和 event.dataTransfer.setDragImage() 设置拖拽图片基本没用。。。。

event.dataTransfer.setDragImage() 这个还有一个兼容问题就是图片必须在浏览器内显示否则谷歌不能显示火狐能显示所以。。。。

event.dataTransfer.setData() 设置拖拽是存的数据

event.dataTransfer.getData() 取拖拽存储的数据

第二个demo:

本地上传预览：

仿照的是QQ邮箱那个上传文件，突然想到其实这个也可以做这个上传头像。。。。

event.dataTransfer.files 拖拽的文件列表

var fr = new FileReader() 文件对象

fs[i].type 这个很重要是拖拽文件的类型这个需要做类型的判断

fs[i].name 文件的名称

fs[i].size 文件的大小

剩下的自行 consle.log( event.dataTransfer.files[0] ) 看看有什么属性就行了。。。。

posted @ 2015-08-13 16:43 uustoboy 阅读(452) 评论(0) 编辑收藏举报

刷新页面返回顶部

html5 - drag 拖拽

公告