突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述


Posted in HTML / CSS onJanuary 31, 2013

拖拽(Drag/Drop)是个非常普遍的功能。你可以抓住一个对象,并且拖动到你想放置的区域。很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件。在HTML5中,拖拽(draganddrop)成为了标准操作,任何元素都支持。正因为这个功能太普遍了,所有的主流浏览器都支持这个操作。
启用拖拽-draggable属性
非常简单,只需要将一个元素的拖动属性修改为draggable,这个元素就支持拖动了,如下所示:

复制代码
代码如下:

<imgdraggable="true"/>

拖动中数据的传递
拖动的过程中,我们往往需要传递相应的逻辑数据来完成转换的过程,这里主要是使用dataTransfer对象进行数据传递,下面先看看它的成员:
方法成员:
复制代码
代码如下:

setData(format,data):把被拖动的数据赋值给dataTransfer对象。

format:一个String型参数,指定被拖动数据的类型。该参数取值可以是“Text”(文本类型)和“URL”(URL类型)。该参数是大小写无关的,所以传入"text"与"Text"是一样的。
data:一个变体类型参数,指定被拖动的数据。该数据可以是文本,图片路径,URL等等。
该函数有Boolean类型的返回值,true表示数据成功加到dataTransfer中,false代表不成功。如果需要,可以通过这个参数来决定是否应该继续执行某些逻辑。
复制代码
代码如下:

getData(format):获取dataTransfer中存放的拖动数据。

format意义与setData中的一样,取值可以是"Text"(文本类型)和"URL"(URL类型)。
复制代码
代码如下:

clearData(format):移除指定类型的数据。

这里的format除了上面可以指定的"Text"(文本类型)和"URL"(URL类型)外,还可以取下列值:file-文件,html-html元素,image-图片。
这个方法可以用于去选择性的处理拖动的数据类型。
属性成员
复制代码
代码如下:

effectAllowed:设置或获取数据源元素中的数据可以执行的操作。

属性类型为字符串,取值范围如下:
"copy"-复制数据.
"link"-链接数据.
"move"-移动数据
"copyLink"-复制或链接数据,由目标对象来确定。
"copyMove"-复制或移动数据,由目标对象来确定。
"linkMove"-链接或移动数据,由目标对象来确定。
"all"-所有的操作都是支持的。
"none"-禁止拖动。
"uninitialized"-默认值,采用默认的行为。
注意设置effectAllowed为none以后,拖动是禁止的,但是鼠标形状还是显示没有可拖动的对象的形状,如果想不显示这个鼠标形状,则需要将window的event事件的属性returnValue设置为false。
复制代码
代码如下:

dropEffect:设置或获取拖动的目标上允许的操作以及相关的鼠标形状。

属性类型为字符串,取值范围如下
"copy"-鼠标显示为复制时的形状;
"link"-鼠标显示为连接的形状;
"move"-鼠标显示为移动的形状。
"none"(默认值)-鼠标显示为没有拖动的形状。
effectAllowed指定了数据源支持的操作,所以通常在ondragstart事件中指定。dropEffect指定了拖动放置的目标支持的操作,所以与effectAllowed配合,通常在拖动的目标上的ondragenter,ondragover和ondrop等事件中使用。
复制代码
代码如下:

files:返回拖动的文件的列表FileList。
types:ondragstart中发送的数据(被拖动的数据)类型的列表。

dataTransfer对象的存在,使得在拖动的数据源和目标元素之间传递逻辑数据变成了可能。通常我们使用setData方法在数据源元素的ondragstart事件中提供数据,然后再目标元素中,使用getData方法获取数据。
拖动中触发的事件
下面是一次拖拽会发生的事件,基本上事件的触发顺序也就是下面的顺序:
复制代码
代码如下:

dragstart:要被拖拽的元素开始拖拽时触发,这个事件对象是被拖拽元素。
drag:拖拽元素时触发,这个事件对象是被拖拽元素。
dragenter:拖拽元素进入目标元素时触发,这个事件对象是目标元素。
dragover:拖拽某元素在目标元素上移动时触发,这个事件对象是目标元素。
dragleave:拖拽某元素离开目标元素时触发,这个事件对象是目标元素。
drop:将被拖拽元素放在目标元素内时触发,这个事件对象是目标元素。
dragend:在drop之后触发,就是拖拽完毕时触发,这个事件对象是被拖拽元素。

基本上事件的参数event都会传入相关的元素,可以很方便的进行一些修改。这里,我们并不需要处理每个事件,通常只需要挂接主要的几个事件即可。
拖动开始-ondragstart事件
从这个事件传入的参数含有的信息非常丰富,从中可以很方便的获取到被拖动的元素(event.Target);从中可以设置被拖动数据(event.dataTransfer.setData);所以你可以很方便实现拖动的背后逻辑(当然你绑定的时候也可以传递其他的参数)。
拖动过程中-ondrag,ondragover,ondragenter和ondragleave事件
ondrag事件的对象是被拖拽元素,通常这个事件处理的比较少。ondragenter事件是当拖动进入当前元素时发生,ondragleave事件是在当拖动离开当前元素时发生,ondragover事件是在拖动在当前元素中移动时发生。
这里只需要注意一点,因为默认情况下,浏览器是禁止元素drop的,所以为了让元素可以drop,需要在这个函数中返回false或者调用event.preventDefault()方法。如下面的例子所示。
拖动结束-ondrop,ondragend事件
当可拖动的数据被drop的时候,drop事件触发。drop结束后,dragend事件被触发,这个事件使用的也相对少一点。
看一个简单的例子:
复制代码
代码如下:

<!DOCTYPEHTML>
<html>
<head>
<scripttype="text/javascript">
functionallowDrop(ev){
ev.preventDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev){
vardata=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div>
<imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69"/>
</body>
</html>

文件拖拽
上面的例子已经使用了dataTransfer的各种方法和属性,下面再看网上的另外一个有趣的应用:拖拽一个图片到网页上,然后在网页上显示。这个应用用到了dataTransfer的files属性。
复制代码
代码如下:

<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>HTML5拖放文件</title>
<style>
#section{font-family:"Georgia","微软雅黑","华文中宋";}
.container{display:inline-block;min-height:200px;min-width:360px;color:#f30;padding:30px;border:3pxsolid#ddd;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}
.preview{max-width:360px;}
#files-list{position:absolute;top:0;left:500px;}
#list{width:460px;}
#list.preview{max-width:250px;}
#listp{color:#888;font-size:12px;}
#list.green{color:#09c;}
</style>
</head>
<body>
<divid="section">
<p>把你的图片拖到下面的容器内:</p>
<divid="container"class="container">
</div>
<divid="files-list">
<p>已经拖进过来的文件:</p>
<ulid="list"></ul>
</div>
</div>
<script>
if(window.FileReader){
varlist=document.getElementById('list'),
cnt=document.getElementById('container');
//判断是否图片
functionisImage(type){
switch(type){
case'image/jpeg':
case'image/png':
case'image/gif':
case'image/bmp':
case'image/jpg':
returntrue;
default:
returnfalse;
}
}
//处理拖放文件列表
functionhandleFileSelect(evt){
evt.stopPropagation();
evt.preventDefault();
varfiles=evt.dataTransfer.files;
for(vari=0,f;f=files[i];i++){
vart=f.type?f.type:'n/a',
reader=newFileReader(),
looks=function(f,img){
list.innerHTML+='<li><strong>'+f.name+'</strong>('+t+
')-'+f.size+'bytes<p>'+img+'</p></li>';
cnt.innerHTML=img;
},
isImg=isImage(t),
img;
//处理得到的图片
if(isImg){
reader.onload=(function(theFile){
returnfunction(e){
img='<imgclass="preview"src="'+e.target.result+'"title="'+theFile.name+'"/>';
looks(theFile,img);
};
})(f)
reader.readAsDataURL(f);
}else{
img='"o((>ω<))o",你传进来的不是图片!!';
looks(f,img);
}
}
}
//处理插入拖出效果
functionhandleDragEnter(evt){this.setAttribute('style','border-style:dashed;');}
functionhandleDragLeave(evt){this.setAttribute('style','');}
//处理文件拖入事件,防止浏览器默认事件带来的重定向
functionhandleDragOver(evt){
evt.stopPropagation();
evt.preventDefault();
}
cnt.addEventListener('dragenter',handleDragEnter,false);
cnt.addEventListener('dragover',handleDragOver,false);
cnt.addEventListener('drop',handleFileSelect,false);
cnt.addEventListener('dragleave',handleDragLeave,false);
}else{
document.getElementById('section').innerHTML='你的浏览器不支持啊,同学';
}
</script>
</body>
</html>

这个例子中使用了html5中的文件读取API:FileReader对象;该对象提供了下列异步方法用于读取文件:
1.FileReader.readAsBinaryString(fileBlob)
以二进制的方式读取文件,result属性会包含一个文件的二进制的格式
2.FileReader.readAsText(fileBlob,opt_encoding)
以文本的方式读取文件,result属性将会包含一个文件的文本格式,默认解码参数是“utf-8”。
3.FileReader.readAsDataURL(file)
以URL形式读取文件result将会包含一个文件的DataURL格式(图片通常用这种方式)。
当使用上面的方法读取文件后,会触发下列事件:
复制代码
代码如下:

onloadstart,onprogress,onabort,onerror,onload,onloadend

这些事件都很简单,需要的时候挂接就可以了。看下面的代码示例:
复制代码
代码如下:

functionstartRead(){
//obtaininputelementthroughDOM
varfile=document.getElementById('file').files[0];
if(file){
getAsText(file);
}
}
functiongetAsText(readFile){
varreader=newFileReader();
//ReadfileintomemoryasUTF-16
reader.readAsText(readFile,"UTF-16");
//Handleprogress,success,anderrors
reader.onprogress=updateProgress;
reader.onload=loaded;
reader.onerror=errorHandler;
}
functionupdateProgress(evt){
if(evt.lengthComputable){
//evt.loadedandevt.totalareProgressEventproperties
varloaded=(evt.loaded/evt.total);
if(loaded<1){
//Increasetheprogbarlength
//style.width=(loaded*200)+"px";
}
}
}
functionloaded(evt){
//Obtainthereadfiledata
varfileString=evt.target.result;
//HandleUTF-16filedump
if(utils.regexp.isChinese(fileString)){
//ChineseCharacters+Namevalidation
}
else{
//runothercharsettest
}
//xhr.send(fileString)
}
functionerrorHandler(evt){
if(evt.target.error.name=="NotReadableErr"){
//Thefilecouldnotberead
}
}

这里也简单说一下:普通的文件下载使用的就是window.open方法,例如:
复制代码
代码如下:

window.open('http://aaa.bbbb.com/ccc.rar','_blank')

实用参考:
官方文档:http://www.w3schools.com/html5/
一个不错的教程网站:http://html5.phphubei.com/html5/features/DrapAndDrop/
MSDN帮助:http://msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx
文件拖拽详述:http://www.html5rocks.com/zh/tutorials/file/dndfiles/
文件拖拽并上传:http://www.chinaz.com/design/2010/0909/131984.shtml
文件拖拽上传完整例子:http://www.cnblogs.com/liaofeng/archive/2011/05/18/2049928.html
文件下载的例子:http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05
window.open攻略:http://www.cnblogs.com/liulf/archive/2010/03/01/1675511.html
window.open参数:http://www.koyoz.com/blog/?action=show&id=176 
HTML / CSS 相关文章推荐
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
HTML5中的新元素介绍
Oct 17 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 #HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 #HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 #HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 #HTML / CSS
You might like
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
PDO::errorInfo讲解
2019/01/28 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
javascript 闭包
2011/09/15 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
addeventlistener监听scroll跟touch(实例讲解)
2017/08/04 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
python实现调用其他python脚本的方法
2014/10/05 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python 错误和异常代码详解
2018/01/29 Python
浅析Python函数式编程
2018/10/06 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
解决Mac下使用python的坑
2019/08/13 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
群众路线剖析材料
2014/02/02 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
goland 设置project gopath的操作
2021/05/06 Golang
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技