getData()可以取得由setData()保存的值。setData()方法的第一个参数，也是getData()方法唯一的一个参数，是一个字符串，表示保存的数据类型，取值为"text"或"URL"
IE只定义了"text"和"URL"两种有效的数据类型，而HTML5则对此加以扩展,允许指定各种MIME类型。考虑到向后兼容，HTML5也支持"text"和"URL"，但这两种类型会被映射为"text/plain"和"text/uri-list"
实际上，dataTransfer对象可以为每种MIME类型都保存一个值。换句话说，同时在这个对象中保存一段文本和一个URL不会有任何问题
[注意]保存在dataTransfer对象中的数据只能在drop事件处理程序中读取
在拖动文本框中的文本时，浏览器会调用setData()方法，将拖动的文本以"text"格式保存在dataTransfer对象中。类似地，在拖放链接或图像时，会调用setData()方法并保存URL。然后，在这些元素被拖放到放置目标时，就可以通过getData()读到这些数据
<div>请将从这堆内容不同乱七八糟的文字中挑选一些移动到拖放目标中</div> <div>拖放目标</div> <div></div> <script> target.ondragenter = function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } this.innerHTML = '有元素进入目标区域'; this.style.background = 'red'; } target.ondragover = function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } } target.ondragleave = function(e){ e = e || event; this.innerHTML = '元素已离开目标区域'; this.style.backgroundColor = 'lightblue'; } target.ondrop = function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } result.innerHTML = '落入目标区域的文字为:' + e.dataTransfer.getData('text'); this.innerHTML = '元素已落在目标区域'; this.style.backgroundColor = 'orange'; } </script>
当然，也可以在dragstart事件处理程序中调用setData()，手动保存自己要传输的数据，以便将来使用
<div draggable="true" data-value="这是一个秘密">拖动源</div> <div>拖放目标</div> <div></div> <script> //兼容IE8-浏览器 test.onmousedown = function(){ if(this.dragDrop){ this.dragDrop(); } } test.ondragstart = function(e){ e = e || event; e.dataTransfer.setData('text',test.getAttribute('data-value')); } target.ondragenter = function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } this.innerHTML = '有元素进入目标区域'; this.style.background = 'red'; } target.ondragover = function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } } target.ondragleave = function(e){ e = e || event; this.innerHTML = '元素已离开目标区域'; this.style.backgroundColor = 'lightblue'; } target.ondrop = function(e){ e = e || event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } result.innerHTML = '落入目标区域的文字为:' + e.dataTransfer.getData('text'); this.innerHTML = '元素已落在目标区域'; this.style.backgroundColor = 'orange'; } </script>
改变光标
利用dataTransfer对象，不仅可以传输数据，还能通过它来确定被拖动的元素以及作为放罝目标的元素能够接收什么操作。为此，需要访问dataTransfer对象的两个属性：dropEffect和effectAllowed
实际上，这两个属性并没有什么用，只是拖动源在拖动目标上移动时，改变不同的光标而已(但是，有一种情况除外)
dropEffect
dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值
"none":不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值(此时，将无法触发drop事件)
"move":应该把拖动的元素移动到放置目标
"copy":应该把拖动的元素复制到放置目标
"link":表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL)
在把元素拖动到放置目标上时，以上每一个值都会导致光标显示为不同的符号
[注意]必须在ondragover事件处理程序中针对放置目标来设置dropEffect属性
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
[注意]必须在ondragstart事件处理程序中设置effectAllowed属性