参考资料：
^_^肥仔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] ) 看看有什么属性就行了。。。。
时间： 2024-10-16 19:55:49