zoukankan      html  css  js  c++  java

  • html5

    参考资料：

    　　　张鑫旭             :　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]  ) 看看有什么属性就行了。。。。
  • 相关阅读:
    [hdu5136]Yue Fei's Battle 2014 亚洲区域赛广州赛区J题(dp)
    Codeforces Round #280 (Div. 2)E Vanya and Field(简单题)
    [hdu5113]Black And White2014北京赛区现场赛B题（搜索加剪枝）
    BestCoder Round #20 部分题解(A,B,C)(hdu5123,5124,5125)
    2014年亚洲区域赛北京赛区现场赛A,D,H,I,K题解(hdu5112,5115,5119,5220,5122)
    UVA 11754 Code Feat （枚举，中国剩余定理）
    Codeforces Round #277.5 (Div. 2) A,B,C,D,E,F题解
    UVA 11426 GCD
    UVALive 4119 Always an integer （差分数列，模拟）
    UVA 10253 Series-Parallel Networks （树形dp）
  • 原文地址：https://www.cnblogs.com/auok/p/4718158.html
Copyright © 2011-2022 走看看