HTML5讲解之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?

<ul> 
 <li draggable="true">梦龙小站</li> 
 <li draggable="true">梦龙小站</li> 
 <li draggable="true">梦龙小站</li> 
</ul> 
<a href="http://www.baidu.com/">梦龙小站</a> 
<p id="p1">梦龙小站</p>

　　CSS代码

[css] view plaincopyprint?

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;} 
#p1{ width:100px; height:100px; background:red; margin:300px;}

　　JavaScript代码

1. [javascript] view plaincopyprint?
   
   //dataTransfer对象 : 连接拖拽细节的 ，在event对象下面的 
   //拖动不带链接的li，会起作用但不跳转链接 
   //拖动带连接的a，会起作用也跳转 
    
   window.onload = function(){ 
    var aLi = document.getElementsByTagName('li'); 
    var aA = document.getElementsByTagName('a'); 
    var op = document.getElementById('p1'); 
    
    for(var i=0;i<aLi.length;i++){ 
    
    aLi[i].ondragstart = function(ev){ //拖拽前触发 
    
    this.style.background = 'yellow'; 
    
    ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串 
    
    ev.dataTransfer.effectAllowed = 'all'; 
    
    ev.dataTransfer.setDragImage(this,0,0); 
    
    }; 
    
    aLi[i].ondragend = function(){ //拖拽结束触发 
    
    this.style.background = ''; 
    
    }; 
    } 
    for(var i=0;i<aA.length;i++){ 
    
    aA[i].ondragstart = function(ev){ //拖拽前触发 
    
    this.style.background = 'yellow'; 
    
    ev.dataTransfer.setData('a','hello'); //存储一个键值对 : value值必须是字符串 
    
    ev.dataTransfer.effectAllowed = 'link'; 
    
    ev.dataTransfer.setDragImage(this,0,0); 
    
    }; 
    
    aA[i].ondragend = function(){ //拖拽结束触发 
    
    this.style.background = ''; 
    
    }; 
    } 
    
    op.ondragenter = function(){ //相当于onmouseover 
    
    this.style.background = 'green'; 
    
    }; 
    
    op.ondragleave = function(){ //相当于onmouseout 
    
    this.style.background = 'red'; 
    
    }; 
    
    op.ondragover = function(ev){ //进入目标、离开目标之间，连续触发 
    
    ev.preventDefault(); //阻止默认事件：元素就可以释放了 
    
    ev.dataTransfer.dropEffect = 'link'; //真对外部文件 
    
    }; 
    
    op.ondrop = function(ev){ //释放鼠标的时候触发 
    
    this.style.background = 'red'; 
    
    alert( ev.dataTransfer.getData('a') ); 
    
    }; 
    
   };

个人技术集锦还为您提供以下相关内容希望对您有帮助：

"."就是调用、读取的意思。第一个"."就是读取对象ev下的dataTransfer。第二个"."就是调用dataTransfer的getData方法。建议去看下 javascript入门知识

数据传输对象dataTransfer包含常用属性，如dropEffect（表示被拖动元素的放置行为，如“none”、“move”、“copy”、“link”）、effectAllowed（允许拖动元素的dropEffect，如“copyLink”、“copyMove”、“linkMove”、“all”）。在dragstart事件中设置effectAllowed属性，dragover事件中设置dropEffect属性。dropEf...

三个function，一个允许拖动至此，一个传送数据，一个接收数据，图片引用传送数据的那个function，div(就是那个框框)引用其他两个，很好理解，为什么这么写不用计较，记住就行

ondrag script 当拖动元素时运行脚本 ondragend script 当拖动操作结束时运行脚本 ondragenter script 当元素被拖动至有效的拖放目标时运行脚本 ondragleave script 当元素离开有效拖放目标时运行脚本 ondragover script 当元素被拖动至有效拖放目标上方时运行脚本 ondragstart ...

15.4 dataTransfer对象应用详解 293 15.4.1 使用effectAllowed和dropEffect属性 设置拖放效果 293 15.4.2 使用setDragImage方法设置拖放图标 294 15.5 小结 295 15.6 习题 295 第16章 多媒体播放 296 视频讲解:35分钟 16.1 HTML 5多媒体的简述 297 16.1.1 HTML 4中多媒体的应用 297 16.1.2 HTML 5页面中的多媒体...

因为dargenter事件不支持用dataTransfer.getData()读取，只有在drop的时候可以，把dropenter改成drop是没有问题的。引文给出了解决办法，创建一个全局变量或者存储在一个地方，enter的时候获取，over的时候清除就行了。

html5的拖拽事件中的dataTransfer里的files存储文件信息，然后创建一个img，加到div中就行

看下，事件是否完全执行；var id = e.DataTransfer.getData('Text');另外建议在chrome下看看 更明确的错误提示。并且：e.DataTransfer 没getData 和setData方法。

File对象提供文件信息，允许JavaScript访问其内容。通常是用户选择文件后返回的FileList对象，或由拖放操作生成的DataTransfer对象，也可能是HTMLCanvasElement上的mozGetAsFile() API返回的。File对象是特殊类型的Blob，可用于任何Blob类型上下文中，如FileReader、URL.createObjectURL、createImageBitmap、XMLHttp...

当然，这个问题的重点是获取图片的原始尺寸，html5里还提供了两个变量来获取：naturalWidth和naturalHeight，这两个分别来获取图片的原始宽度和原始高度。在上面的例子中，就能通过下面的方式获取到：var width = e.target.naturalWidth;var height = e.target.naturalHeight;还有一种情况就是，如果已经存在...