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对象可以是来自用 ...
随机推荐
- 【jquery采坑】Ajax配合form的submit提交(微擎表单提交,ajax验证,submit提交)
1.采坑:实现form的submit提交,在提交之前,进行ajax的不同校验,然后onsubmit=return check(),进行提交 1/1 目的:可以实现以 from的submit提交,然后还 ...
- 【C++】C++中的函数
目录结构: contents structure [-] 简介 可变形参的函数 initializer_list形参 省略符形参 main函数处理命令行选项 函数指针与函数引用 inline内联函数 ...
- Python(字符编码)
https://www.cnblogs.com/zihe/p/6993891.html 一 了解字符编码的知识储备 1. 文本编辑器存取文件的原理(nodepad++,pycharm,word) 打开 ...
- SQL自动流水号函数
CREATE FUNCTION [dbo].[f_NextBH]() ) AS BEGIN ), ),),),) FROM Shop WITH(XLOCK,PAGLOCK)) END
- vue 版本升级配置修改
- Oracle分析函数-统计(sum、avg、max、min)
很多需求中都涉及到统计:均值.累计.范围均值.相邻记录比较等.这些操作会统计多次,或有明确的统计范围,或返回的记录统计的数据集不同... 根据场景不同可分为如下几类: 1. 全统计 2. 滚动统计 3 ...
- awd入门教程
(转自:awk入门教程 - 阮一峰) 以下为正文 ———————————————————— awk是处理文本文件的一个应用程序,几乎所有 Linux 系统都自带这个程序. 它依次处理文件的每一行,并读 ...
- 【2019年03月29日】股票的滚动市盈率PE最低排名
仅根据最新的市盈率计算公式进行排名,无法对未来的业绩做出预测. 深康佳A(SZ000016) - 滚动市盈率PE:2.51 - 滚动市净率PB:1.68 - 滚动年化股息收益率:2.9% - - - ...
- 利用Python半自动化生成Nessus报告
0x01 前言 Nessus是一个功能强大而又易于使用的远程安全扫描器,Nessus对个人用户是免费的,只需要在官方网站上填邮箱,立马就能收到注册号了,对应商业用户是收费的.当然,个人用户是有16个I ...
- Orders matters: seq2seq for set 实验
论文提出了input的顺序影响seq2seq结果 有一些输入本身是无序的怎么去处理呢 作者提出LSTM controller的方式 替代输入的LSTM encode方式 作者实验这种方 ...