标签：
参考资料：
^_^肥仔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>
外部拖拽
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>
后记:
第一个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] ) 看看有什么属性就行了。。。。
标签：
原文地址：http://www.cnblogs.com/auok/p/4718158.html
