HTML5 DragEvent
DragEvent是一个表示drag和drop交互的DOM event接口。用户通过将指针设备（如：鼠标）放在目标的表面开始拖动，然后拖动指针到一个新的位置（如其他DOM元素）。应用程序自动的解析拖放交互。DragEvent接口从mouseEvent和Event那儿继承属性。
Event types
DragEvent并不是一个单一的事件，它包含了多个事件，这些事件分别是：drag，dragstart，dragenter，dragend，dragover，dragexit，dragleave，drop。
drag：这个事件在元素拖拽的过程中反复触发，每一百毫秒触发一次。这事件的目标元素是被拖的那个元素，该事件可冒泡，可取消默认行为。
dragstart：这个事件在用户开始拖动时触发。这个事件的目标元素是被拖的那个元素，在这些事件中，dragstart事件最先触发。该事件可冒泡，可取消默认行为。
dragenter：这个事件在被拖的元素进入一个合法的可drop目标时触发。这个事件的目标元素是这个可drop目标。该事件可冒泡，可取消默认行为。
dragover：当被拖的元素在可drop目标范围内移动时反复触发这个事件，一百毫秒触发一次。这个事件的目标元素是这个可drop目标。该事件可冒泡，可取消默认行为。
dragend：当拖拽结束时触发这个事件，这个事件的目标元素是被拖的元素。在这些事件中dragend最后触发。该事件可冒泡，不能取消默认行为。
dragleave：这个事件在被拖得元素离开合法的可drop目标时触发。这个事件的目标元素是这个可drop目标。该事件可冒泡，不能取消默认行为。
dragexit：当一个可drop元素不再是拖拽操作最近的drop目标时触发这个事件。这个事件的目标元素是这个可drop元素。该事件可冒泡，不嫩取消默认行为。
drop：当在可drop目标上松开拖动元素的指针设备时触发这个事件，该事件的目标元素是这个可drop目标。drop事件在dragend事件触发之前触发。这个事件可冒泡，可取消默认行为。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test target</title>
<style type="text/css">
#drag{
width:200px;
height:200px;
background-color: aqua;
}
.drop{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
我可以拖动
</div>
<img src="test.jpg" id="img">
<div class="drop"></div>
<script type="text/javascript">
document.addEventListener('drag',function(event){
event.target.style.backgroundColor = 'black';
},false);
document.addEventListener('dragstart',function(event){
event.target.style.backgroundColor = 'red'; },false);
document.addEventListener('dragend',function(event){
event.target.style.backgroundColor = 'yellow';
},false);
document.addEventListener('dragover',function(event){
event.preventDefault();
event.target.style.backgroundColor = 'blue';
},false);
document.addEventListener('dragenter',function(event){
event.target.style.backgroundColor = 'green';
},false);
document.addEventListener('dragleave',function(event){
event.target.style.backgroundColor = 'pink';
},false);
document.addEventListener('dragexit',function(event){
event.target.style.backgroundColor = 'red'
},false);
document.addEventListener('drop',function(event){
event.preventDefault();
event.target.style.backgroundColor = 'white';
console.log(2); },false)
</script>
</body>
</html>
这些事件的事件对象包含鼠标事件的事件对象的方法与属性。之外还存在一个dataTransfer属性
让元素可拖
在HTML中默认可拖的元素只有image，link及被选择的文本。要让其他元素可拖，需要做下面这三件事：
1.给元素设置一个draggable属性，并且将这个属性的值设置为true
2.在这个元素上添加一个dragstart的事件监听
3.在dragstart的事件监听上通过event.DataTransfer.setData(type,value)设置拖拽数据。
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
This text <strong>may</strong> be dragged.
</div>
如果draggable属性被禁止或者设置为false，那么这个元素不能被拖拽。draggable属性可以在任何属性上设置。当一个元素设置为可拖，在这个元素上点击或拖动鼠标，这个元素里的文本或其他元素不会被选中。当用户开始拖动，dragstart事件会被触发，在dragstart事件中，你能够通过setData()指定拖拽数据，通过setDragImage()指定图片反馈，以及通过设置effectAllowed属性和dropEffect属性指定拖拽效果。拖拽数据是必须指定的，但是图片反馈是拖拽效果不是必须的
拖拽数据
拖拽数据包含两部分信息，分别是数据的类型和数据的值，数据的类型是字符串，数据的值也是字符串形式。 拖拽数据的类型有：text/plain,text/html,image/jpeg,text/uri-list等，还能够自定义类型。
可以多次调用setData()方法设置多个拖拽数据。如下：
var dt = event.dataTransfer;
dt.setData("application/x-bookmark",bookmarkString);
dt.setData('text/uri-list','www.baidu.com');
dt.setData('text/plain','drag data');
application/x-bookmark是自定义类型。
如果通过这个方法设置新的类型的数据，那么这个新的拖拽数据会位于拖拽数据列表的尾部，如果设置以及存在的类型的数据，那么新的数据会覆盖旧的数据。
通过getData()能够得到指定类型的拖拽数据
通过clearData()能够清除指定类型的拖拽数据
图片反馈
图片反馈并不是必须设置的，默认它是从拖拽目标上生成的一个半透明图片，并且这个图片在拖拽期间会跟着鼠标移动。你能够通过setDragImage(image,xOffect,yOffect)方法自定义图片反馈。
setDragImage()接受三个参数，第一个参数表示图片引用，第二个和第三个表示图片左上角相对于鼠标指针的位置。单位是像素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test target</title>
<style type="text/css">
#drag{
width:200px;
height:200px;
background-color: aqua;
}
.drop{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
我可以拖动
</div>
<img src="test.jpg" id="img">
<div class="drop"></div>
<script type="text/javascript"> document.addEventListener('dragstart',function(event){
event.target.style.backgroundColor = 'red';
event.dataTransfer.setDragImage(document.getElementById('img'),30,30); },false); </script>
</body>
</html>
拖拽效果
通过设置effectAllowed和dropEffect可以指定拖拽效果
事件对象的dataTransfer属性
dataTransfer属性是一个DataTransfer对象，在这个属性中保存了拖拽操作过程中的数据，它可能保存一个或者多个数据项。这个属性是只读的。
dataTransfer属性中的标准属性
1.dropEffect
得到当前drag and drop操作的类型，或者设置给当前drag and drop 设置新的类型。这个属性可能取值是none，copy，move，link。这属性会影响拖拽过程中的鼠标的显示形式。
2.effectAllowed
这个属性用于指定运行的拖拽操作效果，可选的值有none，all，copy，move，link，copyLink，copyMove，linkMove。默认情况这个值是all，如果要设置这个属性的值就要在dragstart的事件处理程序里进行设置。
3.files
包含了在data transfer中的所有可用的本地文件列表，如果被拖拽操作没有涉及文件，那么它是一个空列表。
4.items
是一个包含了所有拖拽数据的列表。它是一个DataTransferItemList对象。
5.types
它是一个字符串数组，这个数组中包含在dragstart事件处理程序中设置的拖拽事件的类型，如果拖拽操作不存在数据，那么他得到一个空数组。
DataTransfer属性的标准方法
1.clearData(type):移除给定类型相关的拖拽数据。接受一个可选的参数，如果这个参数是空或者没有指定，那么移除所以类型的数据，如果指定的类型不存在或者data transfer中不包含数据，那么这个方法不会产生什么影响。
2.getData(type):得到指定类型的拖拽数据。如果指定类型的数据不存在或者data transfer中不包含数据， 得到一个空的字符串。
3.setData(type，value):设置给定类型的拖拽数据。接受两个参数，第一个参数是类型，第二个参数是指定类型的值。 如果这个类型的值不存在，那么在类型列表的最后添加一个新的格式，如果已经存在的,那么在相同的位置 存在的数据被替换.
4.setDragImage(image，xoffset，yoffset):接受三个参数，第一个参数是图片的引用，第二个和第三个参数是移动的图片的 左上角相对鼠标的位置。
DataTransferItemList对象
通过dataTransfer.items得到的值就是DataTransferList对象。
DataTransferItemList对象的属性
1.length:得到拖拽数据的数量
DataTransferItemList对象的方法
1.add()：向拖拽数据列表中添加一个新的拖拽数据，添加成功后返回这个新的拖拽数据。当添加一个文件到拖拽数据列表中，这个方法只接受一个文件对象作为参数。当添加一个给定 类型的字符串到拖拽数据列表中，这个方法接受两个参数，第一个参数是数据，第二个参数是类型。
2.remove(index):从拖拽数据列表中移除指定位置的拖拽数据。这个方法接受一个表示位置的参数，如果这个参数小于0或者大于拖拽数据列表的长度，拖拽数据列表不会发生改变。
3.clear():移除拖拽数据列表中所有的拖拽数据。不需要参数。
4.DataTransferItem(index):得到指定位置上的拖拽数据。接受一个表示位置的参数， 这个方法简写形式是数组索引。
DataTransferItem对象
dataTransfer.items中的每一项都是DataTransferItem对象。
DataTransferItem对象的属性
1.kind：得到拖拽数据的键，可能的值有file和string
2.type：得到拖拽数据的类型，是MINE type
DataTransferItem对象的方法
1.getAsFile():返回拖拽数据的文件对象。如果拖拽数据不是文件则返回null
2.getAsString(function):调用回调函数，这个回调函数将拖拽数据项的字符串形式作为它的参数
拖拽文件
要使文件能够被拖放的一个重要步骤是定义一个放置区域。并且为放置区域添加drop，dragover和dragend事件处理程序。
当为一个元素添加drop事件的处理程序，及在dragover事件处理程序中取消浏览器的默认行为，那么这个元素就是放置区域。
另外，在drag和drop操作结束之后，应用程序应该移除拖拽数据（可能是一个或者多个文件），数据的清理通常在 dragend事件处理程序中。
<div id="drop_zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend = "dragend_handler(event)">
<strong><Drag one or more files to this Drop Zone ...</strong>
</div>
例子一，访问文件名
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
// If dropped items aren't files, reject them
var dt = ev.dataTransfer;
if (dt.items) {
// Use DataTransferItemList interface to access the file(s)
for (var i=0; i < dt.items.length; i++) {
if (dt.items[i].kind == "file") {
var f = dt.items[i].getAsFile();
console.log("... file[" + i + "].name = " + f.name);
}
}
} else {
// Use DataTransfer interface to access the file(s)
for (var i=0; i < dt.files.length; i++) {
console.log("... file[" + i + "].name = " + dt.files[i].name);
}
}
}
例子二，阻止浏览器默认行为
function dragover_handler(ev) {
console.log("dragOver");
// Prevent default select and drag behavior
ev.preventDefault();
}
例子三，清除数据
function dragend_handler(ev) {
console.log("dragEnd");
// Remove all of the drag data
var dt = ev.dataTransfer;
if (dt.items) {
// Use DataTransferItemList interface to remove the drag data
for (var i = 0; i < dt.items.length; i++) {
dt.items.remove(i);
}
} else {
// Use DataTransfer interface to remove the drag data
ev.dataTransfer.clearData();
}
}
HTML5 DragEvent的更多相关文章
- HTML5 File接口(在web页面上使用文件)
File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容. File对象来自于用户使用input标签选择文件返回的FileList对象,来自于拖放操作的Data ...
- 拖放排序插件Sortable.js
特点 支持触屏设备和大部分浏览器(IE9以下的就不支持了,原因都懂得) 可以从一个列表容器中拖拽一个列表单元到其他容器或本列表容器中进行排序 移动列表单元时有css动画 支持拖放操作和可选择的文本(这 ...
- 拖放排序插件Sortable.js 兼容好及功能全个人觉得比dragula.js 好的多
经测试,Sortable.js 兼容好和使用方便都是比较不错的,特别手机端使用很棒 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https: ...
- jq Sortable的使用
本文仅做翻译记录查看,GitHub原项目地址: https://github.com/RubaXa/Sortable/ ,建议将Sortable.js下载到本地,GitHub上的例子在复制到本地运行, ...
- HTML5 Drop API
转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...
- HTML5魔法堂：全面理解Drag & Drop API
一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...
- 使用HTML5开发Kinect体感游戏
一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...
- 读书笔记：《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
- HTML5 Boilerplate - 让页面有个好的开始
最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用. 一:HTML5 ...
随机推荐
- IOS开发－OC学习－Foundation框架练习
OC语言Foundation框架中字典.字符串.数组的应用: NSString *string = @"China|Usa|France"; NSArray *array = [s ...
- RabbitMQ消息队列（二）：”Hello, World“
本文将使用Python(pika 0.9.8)实现从Producer到Consumer传递数据”Hello, World“. 首先复习一下上篇所学:RabbitMQ实现了AMQP定义的消息队列.它实现 ...
- My97DatePicker显示时间控件的使用方法
1.下载My97DatePicker到项目的WebContent文件夹,下载地址http://www.my97.net/dp/down.asp,项目文件夹目录如图所示 2.页面调用 在这里我的路径出现 ...
- 5）Javascript设计模式：extends模式
简单的方式 function Person() { this.name = 'person'; } Person.prototype.say = function() {}; function Chi ...
- JQuery基础知识（2）
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
- php防止重复提交表单
解决方案一:引入cookie机制来解决 提交页面代码如下a.php代码如下: <form id="form1" name="form1" method=& ...
- ssh框架整合log4j
这个是摘录的别人博客的地址,请点击下面的链接...... http://www.cnblogs.com/rushoooooo/archive/2011/08/29/2157361.html
- js与php传递参数
这个问题在网页开发时经常遇到,其实解决办法非常简单,就是几行代码的事,不过各种js.php书上都没有,百度下来也乱七八糟的,有的能用,有的不能用.小编遇到这问题时认认真真研究了一上午,研究出一点心得, ...
- Servlet 应用程序事件、监听器
Web容器管理Servlet/JSP相关的生命周期,若对HttpServletRequest对象.HttpSession对象.ServletContxt对象在生成.销毁或相关属性设置发生的时机点有兴趣 ...
- 删除SVN文件 Delete SVN Folders.reg
批量删除文件夹里的SVN 文件 ------------------------------------------------------------------------------------ ...