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

代码：

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

html5 文件拖拽上传
本文首先发表在码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
H5 语义化、基本事件浅析（含file对象、drag拖拽等）
1.语义化标签帮助搜索引擎,盲人设备等程序,辨识网页内容信息,明确网页区域分布,不体现任何样式,但存在浏览器兼容性问题,如IE8下无<header>标签. ① H5基本语义标签: < ...
HTML5之拖拽(兼容IE和非IE)
前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...
基于html5可拖拽图片循环滚动切换
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div id="s ...
HTML5新特性之Canvas+drag(拖拽图像实现图像反转)
1.什么是canvas 在网页上使用canvas元素时,会创建一块矩形区域,默认矩形区域宽度300px,高度150px.. 页面中加入canvas元素后,可以通过javascript自由控制.可以在其 ...
HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
HTML5原生拖拽/拖放(drag & drop)详解
前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
HTML5图片拖拽预览原理及实现
一.前言这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...
HTML5 实现拖拽
如图可以从第一个方框拖拽花色到第二个方框中. 也可以再拖动回来. 具体代码实现 index.html <!DOCTYPE HTML> <html> <head> ...

随机推荐

EF部分字段更新，忽略为null字段
一般的更新代码是这样的 public T Update<T>(T entity) where T : ModelBase { var set = this.Set<T>(); ...
Sidekiq定时任务时间设置
minutely(2) #每2分钟执行一次 hourly.minute_of_hour(27) #每小时的27分钟执行 dail ...
bootstrap开发微票儿网站首页
1.html代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...
tcp_connect函数
#include <netdb.h> #include <stddef.h> #include <unistd.h> #include <strings.h& ...
MobX响应式编程库
MobX https://mobx.js.org/ https://github.com/mobxjs/mobx MobX is a battle tested library that makes ...
【C++】网络编程 01
趁着计算机网络这门课布置了课程设计,学习下网络编程. 系统:Ubuntu 14.01... 1. 关于Socket(套接字) 1.1 套接字是存在于运输层和应用层间的抽象层,通过它来区分不同应用程序进 ...
IDEA 远程调试 Tomcat 和 Debugger
一般来说我们本地环境使用Tomcat,生产环境使用GlassFish. 准备工作明确远程服务器的 IP 地址,比如:192.168.92.128 关掉服务器防火墙:service iptables ...
springboo05-redis
springboot中使用redis:(1).使用redis工具类手动操作缓存(2).使用cacheable注解到方法头,自动创建缓存数据 1.安装redis https://github.com/d ...
[SYSS-2018-033]: Fujitsu Wireless Keyboard Set LX901 - Keystroke Injection Vulnerability
风险简介: [SYSS-2018-033]:富士通无线键盘组LX901 -击键注入漏洞风险报告ID: sys - 2018 - 033 产品:无线键盘套件LX901 制造商:富士通受影响版本:型号 ...
Unsupervised Domain Adaptation Via Domain Adversarial Training For Speaker Recognition
年域适应挑战(DAC)数据集的实验表明,所提出的方法不仅有效解决了数据集不匹配问题,而且还优于上述无监督域自适应方法.

html5 - drag 拖拽

html5 - drag 拖拽的更多相关文章

随机推荐

热门专题