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截图：

html5 - drag 拖拽

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

     *{ margin:0;padding:0; }

     li{ list-style: none; }

     .cr:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

     .cr{*zoom:1;}

     .conter{ width:900px; margin:0 auto; }

     .left{ float: left;width:420px;}

     .right{ float:right;width:420px; }

     .left h2{margin-top:50px}

     .ul{ margin:50px 0;  }

     .ul li{ height:30px;line-height:30px; font-size: 14px; text-align: center; border:1px solid #333; margin-top:-1px; }

     .remove{  }

     .remove .ul{ margin:0;min-height: 60px; border:1px solid #333; }

     .ul.auto{ min-height:30px; border:none; }

     .img{ position: absolute;left:0;top:0px;}

     </style>

     <script>

     window.onload = function(){

         var oUl = document.getElementById('ul');

         var aLis = null;

         var oRemove = document.getElementById('remove');

         var oImg = document.getElementById('img');

         var oUl2 = document.getElementById('ul2');

         var arrTop;

         var lastT = 0;

         var btn = false;

         setLiTop();

         function setLiTop (){

             arrTop = [];

             btn = false;

             aLis = oUl.getElementsByTagName('li');

             for( var i=0;i<aLis.length;i++ ){

                 aLis[i].index = i;

                 var top = aLis[i].offsetTop;

                 arrTop.push( top );

             }

             for( var i=0;i<aLis.length;i++ ){

                 aLis[i].ondragstart = function( ev ){

                     var ev = window.event || ev;

                     this.style.background = '#ccc';

                     var t = -this.offsetHeight/2;

                     var l = -this.offsetWidth/2;

                     ev.dataTransfer.setData('index',this.index); // 设置数据,可以看成一个json;

                     ev.dataTransfer.effectAllowed  = 'move'; //设置鼠标样式

                     ev.dataTransfer.setDragImage(oImg,oImg.offsetWidth/2,0); //设置托转出的假图片企业也没多大用 详细文章：http://blog.****.net/isaisai/article/details/39892427 

                 }

                 aLis[i].ondragover = function( ev ){

                     var ev = window.event || ev;

                     lastT = this.offsetTop;

                     ev.preventDefault();

                 }

                 aLis[i].ondragend = function( ev ){

                     this.style.background = '';

                     var ev = window.event || ev;

                     for( var i=0,len=aLis.length;i<len;i++ ){

                         if( lastT == arrTop[i] ){

                             if( !btn ){

                                 if( i == 0){

                                     oUl.insertBefore( this, aLis[i] );

                                 }else{

                                     oUl.insertBefore( this, aLis[i+1] );

                                 }

                                 setLiTop();

                             }

                         }

                     }

                     setLiTop();

                 }

             }    

         }

         oUl2.ondragenter = function(){

             this.style.backgroundColor = 'red';

             btn = true;

         }

         oUl2.ondragover = function(ev){

             var ev = window.event || ev;

             ev.preventDefault();

         }

         oUl2.ondragleave = function(){

             this.style.background = '';

             btn = false;

         };

         oUl2.ondrop = function(ev){

             this.className = 'ul auto';

             var index =  parseInt( ev.dataTransfer.getData('index') ); // 取数据

             var oLi = document.createElement('li');

             oLi.innerHTML = aLis[index].innerHTML;

             oUl.removeChild(aLis[index]);

             oUl2.appendChild( oLi );

             this.style.background = '';

         }

     }

     </script>

 </head>

 <body>

     <div class="conter cr">

         <div class="left">

             <h2>

                 删除列表

             </h2>

             <div class="remove" id="remove">

                 <ul class="ul" id="ul2">

                 </ul>

             </div>

         </div>

         <div class="right">

             <ul class="ul" id="ul">

                 <li draggable="true">

                     音乐播放列表1

                 </li>

                 <li draggable="true">

                     音乐播放列表2

                 </li>

                 <li draggable="true">

                     音乐播放列表3

                 </li>

                 <li draggable="true">

                     音乐播放列表4

                 </li>

                 <li draggable="true">

                     音乐播放列表5

                 </li>

                 <li draggable="true">

                     音乐播放列表6

                 </li>

                 <li draggable="true">

                     音乐播放列表7

                 </li>

             </ul>

             <img id="img" src="http://static.cnblogs.com/images/logo_small.gif" alt="" >

         </div>

     </div>

 </body>

 </html>

外部拖拽

Demo : Demo

外部拖拽Demo截图：

html5 - drag 拖拽

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

     *{ margin:0;padding:0; }

     li{ list-style: none; }

     .cr:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

     .cr{*zoom:1;}

     .conter{ width:202px; margin:100px auto; }

     p{ margin:10px auto; text-align: center;}

     .box{  width:200px;height:200px; margin:0 auto; border:1px solid #ccc; line-height: 200px; font-size:20px; text-align: center; }

     .show-img{ width:950px; margin:0 auto; }

     .show-img img{ display: block; max-width: 950px; margin:0 auto;}

     </style>

     <script>

     window.onload = function(){

         var oBox = document.getElementById('box');

         var oShow = document.getElementById('show');

         oBox.ondragenter = function( ev ){

             this.innerHTML = '释放';

         }

         oBox.ondragleave = function(){

             this.innerHTML = '请将文件拖拽到区域';

         };

         oBox.ondragover = function(ev){

             ev.preventDefault();

         };

         oBox.ondrop = function( ev ){

             var ev = window.event || ev;

             var fs = ev.dataTransfer.files; // 获取拖拽的文件列表

             console.log( ev.dataTransfer.files[0] );

             for( var i=0,len=ev.dataTransfer.files.length;i<len;i++ ){

                 // 判断 上传类型是否为图片;

                 if( fs[i].type.indexOf('image')!= -1 ){  

                     var fr = new FileReader(); //文件对象

                     var n = i;

                     fr.onload = function(){ //当文件读取成功就会触发onload事件

                              var oP = document.createElement('p');

                              oP.innerHTML = '文件名：' + fs[n].name + '||文件大小：' + bytesToSize(fs[n].size);

                              oShow.appendChild( oP );

                              var oImg = document.createElement('img');

                              oImg.src = this.result;//读取的文件信息

                              oShow.appendChild( oImg );

                     };

                     fr.readAsDataURL(fs[i]);  //读取数据

                 }

                 // 判断 上传类型是否为txt;

                 if( fs[i].type.indexOf('text')!= -1 ){

                     var oP = document.createElement('p');

                      oP.innerHTML = '文件名：' + fs[i].name + '||文件大小：' + bytesToSize(fs[i].size);

                      oShow.appendChild( oP );

                 }

              }

             this.innerHTML = '请将文件拖拽到区域';

             ev.preventDefault();

         }

         // 返回文件大小 代码出处:http://blog.****.net/lilinoscar/article/details/40825997

         function bytesToSize( bytes ) {  

            if (bytes === 0) return '0 B';  

             var k = 1024;  

             sizes = ['B','KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];  

             i = Math.floor(Math.log(bytes) / Math.log(k));  

             return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];   

         }  

     }

     </script>

 </head>

 <body>

     <div class="conter">

         <p>只做了图片/txt</p>

         <div class="box" id="box">

             请将文件拖拽到区域

         </div>

     </div>

     <div class="show-img" id="show">

     </div>

 </body>

 </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] ) 看看有什么属性就行了。。。。

秒客网

html5 - drag 拖拽

相关文章