参考资料：

　　　张鑫旭             :　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截图：

代码：

 <!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.csdn.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截图：

代码：

 <!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.csdn.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 拖拽的更多相关文章

  1. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  2. H5 语义化、基本事件 浅析 （含file对象、drag拖拽等）

    1.语义化标签 帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...

  3. HTML5之拖拽(兼容IE和非IE)

    前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...

  4. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  5. HTML5新特性之Canvas+drag(拖拽图像实现图像反转)

    1.什么是canvas 在网页上使用canvas元素时,会创建一块矩形区域,默认矩形区域宽度300px,高度150px.. 页面中加入canvas元素后,可以通过javascript自由控制.可以在其 ...

  6. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  7. HTML5原生拖拽/拖放(drag & drop)详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  8. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  9. HTML5 实现拖拽

    如图 可以从第一个方框拖拽花色到第二个方框中. 也可以再拖动回来. 具体代码实现 index.html <!DOCTYPE HTML> <html> <head> ...

随机推荐

  1. js验证登录注册

    js验证登录注册的优势,在前台直接验证,不需要在后台读取返回数据验证,减轻服务器压力. 登陆验证得必要性,拦截恶意脚本的登录注册攻击.哈哈,当然有些高手是可以直接跳过js验证的. 所以还是后台验证,并 ...

  2. Linux日志痕迹清除

    #coding=utf-8 import os import sys import subprocess def Clear_The_Log(host): logs = ["/var/log ...

  3. HDU 1018(阶乘位数 数学)

    题意是求 n 的阶乘的位数. 直接求 n 的阶乘再求其位数是不行的,开始时思路很扯淡,想直接用一个数组存每个数阶乘的位数,用变量 tmp 去存 n 与 n - 1 的阶乘的最高位的数的乘积,那么 n ...

  4. IO流--序列化流与反序列化流

    IO流--序列化流与反序列化流: 序列化流:把对象当做流一样写入到文本文件中 ObjectOutputSream(); 反序列化流:把文本文件中的流对象还原成对象ObjectInputSream(): ...

  5. jqweui Picker使用一个小问题

    地址:http://jqweui.com/extends#picker加了Display Value后,会产生改变值后,Picker显示Value而不显示Text情况.需要在OnClose里做如下处理 ...

  6. oracle查看表空间数据文件使用情况

    -- 查看表空间数据文件使用情况 select a.*, round(a.usedgb/a.maxgb*100) || '%' usedPer from ( select t.TABLESPACE_N ...

  7. Burp Suite Intruder中爆破模式介绍

    Burp Suite Intruder中爆破模式介绍 - Introduction to Burst Mode in Burp Suite Intruder 1.sniper模式  使用单一的Payl ...

  8. 向dnsrecord.txt 中添加 配置

    #!/bin/bash Ip_addr=`cat /etc/dnsrecord.txt |awk '{print $1}' |head -1` Check_dns_url(){ grep $1 /et ...

  9. Hadoop之YARN思维导图

  10. Python18 Django 基础

    本节内容 上节项目基础语法补充 Django请求的生命周期 通过这张图,我们可以很好的解释一下这个问题. Django请求的生命周期是由客户端的请求开始:经由路由系统找到相对应的视图函数:视图函数到h ...