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.};
转载于:https://www.cnblogs.com/Isabel4u/p/7373343.html
dataTransfer对象相关推荐
- FileReader对象和FormData对象
FormData对象 一.概述 FormData就是表单数据,我们提交表单所用的数据,H5里新加了FormData对象,可以让我们对表单数据进行操作,甚至自己组装表单数据进行提交,而不是单纯的仅仅是页 ...
- JavaScript FormData对象,FileReader对象,files属性
一.ajax与FormData的使用 最近在使用ajax朝后端提交数据时,如果提交的数据都是普通键值对还好说,直接使用ajax默认的格式向后端提交即可. $('#d1').click(function ...
- javascript中打印对象显示[object object]_扒一扒JavaScript中不常见的一些object
前言 今天仔细阅读了MDN的这篇guide:Using XMLHttpRequest,在里面发现了好多以前听都没听过的概念,尤其是那些不为人知的Object,所以在这里特地把它们拎出来讲一下,不求多深 ...
- html dragover获得拖拽对象,突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
拖拽(Drag/Drop)是个非常普遍的功能.你可以抓住一个对象,并且拖动到你想放置的区域.很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件.在HTM ...
- html5网页怎么实现内容追加,纯js实现网页内容复制后自动追加自定义内容
网页操作内容复制内容后纯js实现监听自动追加自定义内容 不少网站技术或者博客上有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢? 其实实现的方式很简单,可以在我 ...
- Javascript Tip(1) 操作剪贴板
javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器 javascript可以使用window.clipboardData对象处理剪贴板内容 保存到剪贴板的方法 setData ...
- java 移动页面中的图片上传_移动端图片操作——上传
上传我们一般都是用"input[type=file]"控件.当你用此控件时,你就授权了网页和服务器访问对应的文件,就可以得到File对象. 友情提示在,在Android手机webv ...
- 拖拽的原生和jQuery写法
相关事件 drag dragstart dragend dragover dragenter dragleave dragexit drop 原生写法 var dragged;/* 可拖动的目标元素会 ...
- HTML5原生拖拽/拖放 Drag Drop 详解
转载自:juejin.im/post/5a169d- 前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准 ...
最新文章
- 大家都收藏了的最新开源项目Top12!CV、NLP、机器学习一应俱全
- erp沙盘采购总监的心得_erp沙盘模拟采购总监心得
- apache目录遍历漏洞利用_Apache漏洞—多后缀名解析、目录遍历和(CVE-2017-15715)
- WSUS补丁服务器部署详细 利用WSUS部署更新程序
- LINUX出错解决办法:无法定位软件包 libX11-dev
- [2018.08.08 T1] 签到题
- matlab与螺旋桨,基于Matlab的船用螺旋桨计算机实时仿真及GUI设计
- Cadence Allegro PCB设计88问解析(十二) 之 Allegro中两种单位显示设置
- 遥感影像公开数据集:deepglobe-road-dataset
- oa处理会签流程图_关于合同会签oa流程使用说明..doc
- 接口授权时已经有access_token了为啥还需要refresh_token
- SharePlex for oracle on linux安装步骤
- R数据分析:如何在R中使用mutate
- Selenium元素定位神器工具谷歌浏览器插件-ChroPath介绍,安装与使用
- 设置canvas画布大小
- day32_创建Mysql账户,以及python操作Mysql
- 基于遗传算法改进的BP神经网络电网负荷预测,GA-BP神经网络电网负荷预测,1000案例之14
- 【泄漏类】android7.0 system_server发生global reference table overflow问题分析
- YAMAHA机械手的使用注意事项
- Linux策略路由和iptables OUTPUT链的一个细节
热门文章
- Objective-C ,ios,iphone开发基础:ios数据库(The SQLite Database),使用终端进行简单的数据库操作...
- playframe 项目搭建
- CloudFoundry基础知识之理论篇
- Fragment:关于Avoid non-default constructors in fragments的错误
- 【第四篇章-android平台MediaCodec】推断是否支持硬件解码码
- 移动开发js库Zepto.js使用中的一些注意点
- 设置office首字母不变大小的手段
- Python学习笔记简单数据类型之字符串
- Android学习之调用系统相机实现拍照功能
- c语言 傲娇的十六进制,语言拟人向:来自Python、JAVA、C语言的“傲娇”自我介绍...