dataTransfer对象
HTML5拖拽的数据传输
虽然通过dragstart、drag和dragend事件实现了原生拖拽。但是这仅仅是拖拽,在IE6和IE7中还是有些拖拽问题,并且也没有实现数据的交换。为了实现数据的交换,IE5引入了dataTransfer对象。dataTransfer对象是事件对象的一个属性,用于从被拖拽元素相放置目标传递字符串格式的数据。因为它是事件对象的属性,所以只能在拖放事件的事件处理程序中访问dataTransfer对象。在事件处理程序中,可以使用这个对象的属性和方法来完善拖放功能。
dataTransfer对象有两个主要的方法:getData()方法和setData()方法。从这两个方法的英文字面意思上就能大概猜出来其用途。getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数,也是getData()方法唯一的一个参数,是用来保存数据类型的字符串,取值是”text”或”URL”。
IE只定义了”text”或”URL”两种有效的数据类型,而HTML5则对此加以扩展,允许指定各种MIME类型。考虑到向后兼容,HTML5也支持”text”或”URL”,但这两种类型会被映射为”text/plain”或”text/url-list”。
实际上,dataTransfer对象可以为每种MIME类型都保存一个值。也就是说同事在这个对象中保存一段文本和一个URL不会有其他问题。不过,保存在dataTransfer对象中的数据只能在drop事件处理程序中读取。如果在ondrop处理程序中没有读取数据,那就是dataTransfer对象已经被销毁,数据也就随之丢失了。
在拖动文本框中的文本时,浏览器会调用setData()方法,将拖动的文本以”text”格式保存在dataTransfer对象中。类似地,在拖放链接或图像时,会调用setData()方法并保存URL。然后,在这些元素被拖放到放置目标时,就可以通过getData()方法读到这些数据。当然,作为开发人员,你也可以通过dragstart事件处理程序中调用setData(),手工保存自己要传输的数据,以便将来使用。
将数据保存在文本和保存为URL是有区别的。如果将数据保存为文本格式,那么数据不会得到任何特殊处理。如果保存为URL格式,浏览器会将其当成网页中的链接。如果你将这个URL放置到另一个浏览器窗口中,就可以打开该URL。
Firefox 5及之前版本是不能将”url”和”text”映射为””和”text/plain”。但是却能把”Text”(T大写)映射为”text/plain”。为了更好地在跨浏览器的情况下从dataTransfer对象取得数据,最好在取得URL数据时检测两个值,而在取得文本数据时使用”Text”。
注意,一定要把短数据类型放在前面,因为IE10及之前的版本仍然不支持扩展的MIME类型名,而它们在遇到无法识别的数据类型时,会报错。不过”text”或”URL”取值只有IE是强制的,在火狐3.6+、Chrome和Opera中设置其他任意值的字符串也能正常执行。
dropEffect属性和effectAllowed属性
运用dataTransfer对象,不仅仅能传输数据,还能通过dataTransfer对象确定被拖拽的元素以及作为放置目标的元素能够接收什么操作。要实现这样的功能就用到了dropEffect属性和effectAllowed属性。
dropEffect属性
其中,通过dropEffect属性可以知道被拖动的元素能够执行哪种行为。这个属性的四个值如下:
none:不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
move:应该把拖动的元素移动到放置目标。
copy:应该把拖动的元素复制到放置目标。
link:放置目标会打开拖动的元素(但拖动的元素必须是个链接,有URL地址)。
把元素拖动到放置目标上的时候,以上每一个值都会导致光标显示为不同的符号。
effectAllowed属性
光有dropEffect属性是不咋管用的。只有结合effectAllowed属性一起使用才能发挥功效。effectAllowed属性表示允许拖动元素的哪种行为(dropEffect)。effectAllowed属性也有很多值,其值如下:
uninitialized:没有给被拖动元素设置任何放置行为。
none:被拖动的元素不能有任何行为。
copy:只允许值为”copy”的dropEffect。
link:只允许值为”link”的dropEffect。
move:只允许值为”move”的dropEffect。
copyLink:允许值为”copy”和”link”的dropEffect。
copyMove:允许值为”copy”和”move”的dropEffect。
linkMove:允许值为”link”和”move”的dropEffect。
all:允许任意dropEffect。
要设置effectAllowed属性必须在ondragstart事件处理程序中设置。小例子如下
HTML代码
[html] view plaincopyprint?
view sourceprint?
1.<ul>
2.<lidraggable="true">梦龙小站</li>
3.<lidraggable="true">梦龙小站</li>
4.<lidraggable="true">梦龙小站</li>
5.</ul>
6.<ahref="http://www.baidu.com/">梦龙小站</a>
7.<divid="div1">梦龙小站</div>
CSS代码
view sourceprint?
1.[css] view plaincopyprint?
2.
3.li{ width:100px; height:30px; border:1px#000000solid; margin:20px; list-style:none;}
4.#div1{ width:100px; height:100px; background:red; margin:300px;}
JavaScript代码
view sourceprint?
01.[javascript] view plaincopyprint?
02.
03.//dataTransfer对象 : 连接拖拽细节的 ,在event对象下面的
04.//拖动不带链接的li,会起作用但不跳转链接
05.//拖动带连接的a,会起作用也跳转
06.
07.window.onload = function(){
08.varaLi = document.getElementsByTagName('li');
09.varaA = document.getElementsByTagName('a');
10.varoDiv = document.getElementById('div1');
11.
12.for(vari=0;i<aLi.length;i++){
13.
14.aLi[i].ondragstart = function(ev){ //拖拽前触发
15.
16.this.style.background = 'yellow';
17.
18.ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串
19.
20.ev.dataTransfer.effectAllowed = 'all';
21.
22.ev.dataTransfer.setDragImage(this,0,0);
23.
24.};
25.
26.aLi[i].ondragend = function(){ //拖拽结束触发
27.
28.this.style.background = '';
29.
30.};
31.}
32.for(vari=0;i<aA.length;i++){
33.
34.aA[i].ondragstart = function(ev){ //拖拽前触发
35.
36.this.style.background = 'yellow';
37.
38.ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串
39.
40.ev.dataTransfer.effectAllowed = 'link';
41.
42.ev.dataTransfer.setDragImage(this,0,0);
43.
44.};
45.
46.aA[i].ondragend = function(){ //拖拽结束触发
47.
48.this.style.background = '';
49.
50.};
51.}
52.
53.oDiv.ondragenter = function(){ //相当于onmouseover
54.
55.this.style.background = 'green';
56.
57.};
58.
59.oDiv.ondragleave = function(){ //相当于onmouseout
60.
61.this.style.background = 'red';
62.
63.};
64.
65.oDiv.ondragover = function(ev){ //进入目标、离开目标之间,连续触发
66.
67.ev.preventDefault(); //阻止默认事件:元素就可以释放了
68.
69.ev.dataTransfer.dropEffect = 'link'; //真对外部文件
70.
71.};
72.
73.oDiv.ondrop = function(ev){ //释放鼠标的时候触发
74.
75.this.style.background = 'red';
76.
77.alert( ev.dataTransfer.getData('a') );
78.
79.};
80.
81.};
dataTransfer对象的更多相关文章
- HTML5 拖放(Drag 和 Drop)功能开发——浅谈dataTransfer对象
[前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象 之前的一 ...
- DataTransfer对象的一些总结
所有元素都支持防止目标事件,但是这些元素默认是不允许释放的,如果拖动元素经过不允许放置的元素无论用户如何操作,都不会触发drop事件,不过可以把任何元素变成有效的放置目标.方法是重写dropenter ...
- JS中dataTransfer对象在拖曳操作中的妙用。
转载 原文 https://my.oschina.net/jiangli0502/blog/179197 dataTransfer对象提供了对于预定义的剪贴板格式的访问,以便在拖曳操作中使用. 通 ...
- dataTransfer 对象
dataTransfer 对象 提供了对于预定义的剪贴板格式的访问,以便在拖曳操作中使用. DHTML元素属性列表 属性 描述 dropEffect 设置或获取拖曳操作的类型和要显示的光标类型. ef ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- HTML5原生拖拽事件的值传递(三dataTransfer对象)
引用一篇博客,讲解的比较详细:http://www.tuicool.com/articles/j6Zbam
- 拖动对象ondrag
说明: 在进行拖放操作时,dataTransfer 对象用来保存被拖动的数据.它可以保存一项或多项数据.一种或者多种数据类型.dataTransfer对象有两个主要的方法:getData()方法和se ...
- DataTransfer(setData()方法)
DataTransfer对象专门用来存储拖放时要携带的数据,它可以被设置为拖放事件对象的DataTransfer属性.---把拖动的数据存入其中setData有两个参数:1.第一个参数为携带数据的数据 ...
- HTML5 FileReader读取Blob对象API详解
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用 ...
随机推荐
- 多线程处理N维度topk问题demo--[c++]
问题 -对多维度特征进行topk排序,使用c++ 优先队列模拟最大堆. /* ---------------------------------- Version : ?? File Name : d ...
- Kettle实现数据抽取、转换、装入和加载数据-数据转移ETL工具
原文地址:http://www.xue51.com/soft/5341.html Kettle是来自国外的一款开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,绿色无需 ...
- Centos使用LVS+keepalive 搭建集群原理详解
负载均衡集群是 load balance 集群的简写,翻译成中文就是负载均衡集群.常用的负载均衡开源软件有nginx.lvs.haproxy,商业的硬件负载均衡设备F5.Netscale.这里主要是学 ...
- Spring的两种代理方式:JDK动态代理和CGLIB动态代理
代理模式 代理模式的英文叫做Proxy或Surrogate,中文都可译为”代理“,所谓代理,就是一个人或者一个机构代表另一个人或者另一个机构采取行动.在一些情况下,一个客户不想或者不能够直接引用一个对 ...
- Windows Server 2003下DHCP服务器的安装与简单配置图文教程
在前面的内容中,我们提到了DHCP这个词,为什么要用到DHCP呢,企业里如果有100台计算机,那样,我们一台台的进行配置Ip,我想还是可以的,因为少嘛,如果成千上万台,那我们也去一台台的配置,我相信这 ...
- C#.net mysql There is already an open datareader associated with this command引发的问题
[参考]There is already an open datareader associated with this command引发的问题 我在语句中并未使用 DataReader,未何也提示 ...
- 81For全栈技术网
你想了解前端吗? 你想了解后端吗? 你想了解设计吗? 81For全栈技术这里包含了互联网所有内容,81For.com是全栈技术网,包括:前端.后端.全栈.jquery.vue.react.router ...
- PHP 通过构造器进行依赖注入 demo
class A{ public $b; public $f; function __construct( B $b , $f = 1 ){ $this->b = $b; $this->f ...
- kafka---->kafka connect的使用(一)
这里面介绍一下kafka connect的一些使用. kafka connect的使用 一.在config目录下面复制一个file-srouce.properties并且修改内容 huhx@gohuh ...
- python基础类型—列表
列表 列表是python中的基础数据类型之一,其他语言中也有类似于列表的数据类型,比如js中叫数组,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如: li = [‘alex’ ...