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代码
[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') ); }; };
以上就是html5讲解之datatransfer对象的详细内容。