DataTransfer
一、认识
**DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。**这个对象可以从所有拖动事件 drag events 的 dataTransfer 属性上获取。
二、构造函数
2.1 DataTransfer()
DataTransfer() 通过构造函数 DataTransfer 创建一个新的 DataTransfer 对象。注意，单独创建该对象没有意义，且 Internet Explorer 中 DataTransfer 不是一个构造函数。
语法
var dataTrans = new DataTransfer()
返回值: 一个空的 DataTransfer 对象。
三、实例属性
3.1 DataTransfer.dropEffect
DataTransfer.dropEffect 属性控制在拖放操作中给用户的反馈（通常是视觉上的）。它会影响在拖拽过程中光标的手势。例如，当用户 hover 在一个放置目标元素上，浏览器的光标可能会预示了将会发生什么操作。
当 DataTransfer 被创建时，dropEffect 被设置为一个字符串。读这个值时会返回它的当前值。设置这个值时，如果这个新的值是下面列出的值中的一个，这个属性的值就会被设置为这个新的值，其他的值都会被忽略。
对于 dragenter 和 dragover 事件，dropEffect 会根据用户的请求的行为进行初始化。具体如何初始化和浏览器平台有关，但是通常来讲，用户可以通过按住修改键，比如 alt 键来修改想要的行为。当我们期望得到一个指定的行为时而不是用户的请求行为时，可以通过 dragenter 和 dragover 事件处理修改 dropEffect 的值。
对于 drop 和 dragend 事件，dropEffect 会被设置为想要得到的值，即最后一次 dragenter 或 dragover 事件后 dropEffect 的值。例如，在一个 dragend 事件中，如果期望得到的 dropEffect 是 move，那么被拖拽的数据会从源中移除。
语法
dataTransfer.dropEffect;
返回值
一个代表拖动操作效果的 DOMString, 可能的值有:
-
copy: 在新位置生成源项的副本 -
move: 将项目移动到新位置 -
link: 在新位置建立源项目的链接 -
none: 项目可能禁止拖放（译者注：还与effectAllowed设置的值相关）
将任何其他值赋给 dropEffect 都没有效果，这种情况下会保留旧值。
3.2 DataTransfer.effectAllowed
DataTransfer.effectAllowed 属性指定拖放操作所允许的一个效果。copy 操作用于指示被拖动的数据将从当前位置复制到放置位置。move 操作用于指定被拖动的数据将被移动。link 操作用于指示将在源和放置位置之间创建某种形式的关系或连接。
应该在dragstart事件中设置此属性，以便为拖动源设置所需的拖动效果。在 dragenter 和 dragover 事件处理程序中，该属性将设置为在 dragstart 事件期间分配的任何值，因此，可以使用 effectAllowed 来确定允许哪个效果。
给 effectAllowed 赋一个值，以使其在除 dragstart 之外的事件中无效。
语法
dataTransfer.effectAllowed;
返回值
表示允许的拖动操作DOMString 。这个可能值是:
-
none: 此项表示不允许放下 -
copy: 源项目的复制项可能会出现在新位置。 -
copyLink: 允许copy或者link操作。 -
copyMove: 允许copy或者move操作。 -
link: 可以在新地方建立与源的链接。 -
linkMove: 允许link或者move操作。 -
move: 一个项目可能被移动到新位置。 -
all: 允许所有的操作。 -
uninitialized: 效果没有设置时的默认值，则等同于all。
分配一个没有效果的其他值给 effectAllowed，则保留原值。
3.3 DataTransfer.files
**DataTransfer.files**属性在拖动操作中表示文件列表。如果操作不包含文件，则此列表为空。此功能可用于将文件从用户桌面拖动到浏览器。
语法
dataTransfer.files;
返回值
拖动操作中的文件列表，操作中每个文件的一个列表项。如果拖动操作没有文件，此列表为空。
3.4 DataTransfer.items
DataTransfer的items 属性只读，是拖动操作中 数据传输项的列表。该列表包含了操作中每一项目的对应项，如果操作没有项目，则列表为空。
语法
itemList = dataTransfer.items;
返回值
一个DataTransferItemList对象，包含了表示拖动操作中被拖动项的DataTransferItem对象，每一个拖动项对应一个列表项。如果拖动操作中没有数据，则列表为空。
3.5 DataTransfer.types
DataTransfer.types 是只读属性。它返回一个我们在 dragstart 事件中设置的拖动数据格式 (如 字符串) 的数组。格式顺序与拖动操作中包含的数据顺序相同。
这些格式是指定数据类型或格式的 Unicode 字符串，通常由 MIME 类型给出。一些非 MIME 类型的值是由于历史遗留原因（例如text）而特殊设置的。
语法
dataTransfer.types;
返回值
拖动操作中使用的数据格式数组。每种格式都是字符串类型。如果拖动操作不包含数据，则此数组列表将为空。如果拖动操作中包含任何文件，则其中一个类型将是 Files。
四、实例方法
4.1 DataTransfer.clearData()
DataTransfer.clearData() 方法删除给定类型的拖动操作的 drag data。如果给定类型的数据不存在，则此方法不执行任何操作。如果调用此方法时没有传入参数，或者参数为空字符串，则将删除所有类型的数据。此方法不会从拖动操作中删除文件，因此如果有任何文件包含在对象的 DataTransfer.types 列表中，仍然可能有一个类型为Files的条目在拖动。
时机
该方法只能在 dragstart 事件的处理程序中使用，因为这是拖动操作的数据存储唯一能写入的时间。
语法
DataTransfer.clearData([format]);
format: 一个string指定要删除的数据类型。如果此参数为空字符串或未提供，则将删除所有类型的数据。
4.2 DataTransfer.getData()
DataTransfer.getData() 方法接受指定类型的拖放（以DOMString的形式）数据。如果拖放行为没有操作任何数据，会返回一个空字符串。数据类型有：text/plain，text/uri-list。
语法
DOMString dataTransfer.getData(format);
format:DOMString类型
返回值
返回一个给定类型的DOMString格式的数据。如果没有操作数据或者没有指定操作数据的类型，都会返回一个空字符串。
4.3 DataTransfer.setData()
DataTransfer.setData() 方法用来设置拖放操作的 drag data 到指定的数据和类型。如果给定类型的数据不存在，则将其添加到拖动数据存储的末尾，使得 types 列表中的最后一个项目将是新类型。如果给定类型的数据已经存在，现有数据将被替换为相同的位置。也就是说，替换相同类型的数据时 types列表的顺序不会更改。示例数据类型为：text/plain 和 text/uri-list.
语法
void dataTransfer.setData(format, data);
-
format: 一个DOMString表示要添加到drag object的拖动数据的类型。 -
data: 一个DOMString表示要添加到drag object的数据。
4.4 DataTransfer.setDragImage()
发生拖动时，从拖动目标 (dragstart事件触发的元素) 生成半透明图像，并在拖动过程中跟随鼠标指针。这个图片是自动创建的，你不需要自己去创建它。然而，如果想要设置为自定义图像，那么 DataTransfer.setDragImage() 方法就能派上用场。
图像通常是一个 <image> 元素，但也可以是 <canvas> 或任何其他图像元素。该方法的 x 和 y 坐标是图像应该相对于鼠标指针出现的偏移量。
坐标指定鼠标指针相对于图片的偏移量。例如，要使图像居中，请使用图像宽度和高度的一半。
时机
通常在 dragstart 事件处理程序中调用此方法。
语法
void dataTransfer.setDragImage(img, xOffset, yOffset);
-
img | Element: 用于拖曳反馈图像的图像Element元素。如果Element是一个img元素，则将拖动位图设置为该元素的图像（保持大小）；否则，将拖动数位图设置为从给定元素所生成的图片（当前尚未指定执行此操作的确切机制） -
xOffset: 使用long指示相对于图片的横向偏移量 -
yOffset: 使用long指示相对于图片的纵向偏移量