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> ...

随机推荐

ACM-ICPC 2018 南京赛区网络预赛 G Lpl and Energy-saving Lamps（模拟+线段树）
https://nanti.jisuanke.com/t/30996 题意每天增加m个灯泡,n个房间,能一次性换就换,模拟换灯泡过程.询问第几天的状态分析离线做,按题意模拟.比赛时线段树写挫了. ...
python代码块和小数据池
id和is 在介绍代码块之前,先介绍两个方法:id和is,来看一段代码 # name = "Rose" # name1 = "Rose" # print(id( ...
五.HashTable原理及实现学习总结
有两个类都提供了一个多种用途的hashTable机制,他们都可以将可以key和value结合起来构成键值对通过put(key,value)方法保存起来,然后通过get(key)方法获取相对应的valu ...
Sqlserver脚本创建登录名密码
use table1 GO ', default_database=table1; GO create user abc for login abc with default_schema=dbo; ...
时间戳time
时间戳(timestamp)的方式:通常来说,时间戳表示的是从1970年1月1日开始按秒计算的偏移量(time.gmtime(0))此模块中的函数无法处理1970纪元年以前的时间或太遥远的未来(处理极 ...
[C++]猜数字游戏的提示(Master-Mind Hints,UVa340)
[本博文非博主原创,思路与题目均摘自刘汝佳<算法竞赛与入门经典(第2版)>] Question 例题3-4 猜数字游戏的提示(Master-Mind Hints,UVa340) 实现一个 ...
rabbitMQ学习3-RPC远程过程调用
将一个函数运行在远程计算机上并且等待获取那里的结果,这个称作远程过程调用(Remote Procedure Call)或者 RPC. RPC是一个计算机通信协议. 比喻将计算机服务运行理解为厨师做饭 ...
Django之CRM项目Day3-客户展示及分页
1.展示客户模板的查找顺序: 先找全局的templates--> 按照app的注册顺序找templates中的文件使用admin添加数据: 创建超级用户 python manage.py ...
lua 语法的使用总结
1.字符串连接 local tmp = "abc" local tmp1 = "ddd" tmp..tmp1 2. table 类型就是关联数组 local ...
mysql 无法链接, 输入密码失败
今天,在外面上网,使用的是公网(好像不安全,我也不懂),然后连接数据库,出现下面错误,我明明输入正确的密码还是失败了. 然后我在网上查方式, 应该是没有设置开机启动,输入了: mysqld --con ...

html5 - drag 拖拽

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

随机推荐

热门专题