HTML5实战与剖析之原生拖拽(三dataTransfer对象)
但是这仅仅是拖拽，在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”。www.algongyi.com
实际上，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中设置其他任意值的字符串也能正常执行。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
