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]  ) 看看有什么属性就行了。。。。
  • 相关阅读:
    java OA系统 自定义表单 流程审批 电子印章 手写文字识别 电子签名 即时通讯
    flowable 获取当前任务流程图片的输入流
    最新 接口api插件 Swagger3 更新配置详解
    springboot 集成 activiti 流程引擎
    java 在线考试系统源码 springboot 在线教育 视频直播功能 支持手机端
    阿里 Nacos 注册中心 配置启动说明
    springboot 集成外部tomcat war包部署方式
    java 监听 redis 过期事件
    springcloudalibaba 组件版本关系
    java WebSocket 即时通讯配置使用说明
  • 原文地址：https://www.cnblogs.com/auok/p/4718158.html
Copyright © 2011-2022 走看看