Drop Api ClipboardEvent 和 DataTransfer

ClipboardEvent 接口描述了与修改剪切板相关信息的事件，这些事件包括 剪切cut , 复制copy 和 粘贴paste 事件。

ClipboardEvent 继承 Event。

当我们进行复制剪切操作时，相关内容存储在 ClipboardEvent.clipboardData；ClipboardEvent.clipboardData 是一个 DataTransfer 对象。描述哪些数据可以由 cut 和 copy 事件处理器放入剪切板，通常通过调用 setData(format, data) 方法；
获取由 paste 事件处理器拷贝进剪切板的数据，通常通过调用 getData(format) 方法。接下来我们详细探讨一下 ** DataTransfer **

DataTransfer 是 Drop Api,相关操作可以在 drop 相关事件中处理

DataTransfer 属性
DataTransfer.dropEffect
获取当前选定的拖放操作类型或者设置的为一个新的类型。值必须为 none, copy, link 或 move

DataTransfer.effectAllowed
指定拖放操作所允许的一个效果。必须是 none, copy, copyLink, copyMove, link, linkMove, move, all or uninitialized 之一

• none(此项表示不允许放下)
• copy(源项目的复制项可能会出现在新位置)
• copyLink(允许 copy 或者 link 操作)
• copyMove(允许 copy 或者 move 操作)
• link(可以在新地方建立与源的链接。)
• linkMove(允许 link 或者 move 操作。)
• move(一个项目可能被移动到新位置。)
• all(允许所有的操作。)
• uninitialized(效果没有设置时的默认值，则等同于 all。)

DataTransfer.files
包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表。

DataTransfer.items(只读)
提供一个包含所有拖动数据列表的 DataTransferItemList 对象。如果操作没有项目，则列表为空。

DataTransfer.types(只读)
DataTransfer.types 是只读属性。它返回一个我们在dragstart事件中设置的拖动数据格式 (如 字符串) 的数组。格式顺序与拖动操作中包含的数据顺序相同

DataTransfer 方法

• DataTransfer.getData()
  接受指定类型的拖放数据。如果拖放行为没有操作任何数据，会返回一个空字符串。

• DataTransfer.setData()
  方法用来设置拖放操作的drag data到指定的数据和类型

• DataTransfer.setDragImage()
  方法用来设置自定义图像， 图像通常是一个 元素，但也可以是 或任何其他图像元素。该方法的 x 和 y 坐标是图像应该相对于鼠标指针出现的偏移量。
  坐标指定鼠标指针相对于图片的偏移量。例如，要使图像居中，请使用图像宽度和高度的一半。
  通常在 dragstart 事件处理程序中调用此方法。

• DataTransfer.clearData()
  DataTransfer.clearData() 方法删除给定类型的拖动操作的 drag data。如果给定类型的数据不存在，则此方法不执行任何操作
  如果调用此方法时没有传入参数，或者参数为空字符串，则将删除所有类型的数据。
  此方法不会从拖动操作中删除文件，因此如果有任何文件包含在对象的 DataTransfer.types 列表中，仍然可能有一个类型为“Files”的条目在拖动。
  该方法只能在 dragstart 事件的处理程序中使用，因为这是拖动操作的数据存储唯一能写入的时间。

在上面的学习中， 我们的 DataTransfer.items 是一个DataTransferItemList 对象。DataTransferItemList是 Drop API，接下来我们还要了解一下 ** DataTransferItemList **

DataTransferItemList 对象是一组代表被拖动项的DataTransferItem 对象的列表。在拖动操作期间，每个DragEvent 都有一个 dataTransfer 属性，该属性是 DataTransferItemList。

** DataTransferItemList ** 只有一个属性 ** length** ， 表示列表中拖动项的数量。

DataTransferItemList 方法

• DataTransferItemList.add()
  向拖动项列表中添加新项 (File对象或string)，该方法返回一个 DataTransferItem 对象。
• DataTransferItemList.remove()
  根据索引删除拖动项列表中的对象
• DataTransferItemList.clear()
  清空拖动项列表。
• DataTransferItemList.DataTransferItem()
  取值方法：返回给定下标的DataTransferItem对象。

DataTransferItem 描述了一个拖拽项。在一个拖拽操作*中，*每一个 drag event 都有一个dataTransfer 属性，它包含一个存有拖拽数据的 list ，其中每一项都是一个 DataTransferItem 。

DataTransferItem 属性

• DataTransferItem.kind （只读）

拖拽项的种类，string 或是 file。

• DataTransferItem.type（只读）
  拖拽项的类型，一般是一个 MIME 类型

DataTransferItem 方法

• DataTransferItem.getAsFile()
  返回一个关联拖拽项的 File 对象（当拖拽项不是一个文件时返回 null）
• DataTransferItem.getAsString()
  使用拖拽项的字符串作为参数执行指定回调函数。

下面就是本篇最后一个疑点， 什么是 MIME 类型
媒体类型（也通常称为多用途互联网邮件扩展或 MIME 类型）是一种标准，用来表示文档、文件或一组数据的性质和格式。它在 IETF 的 RFC 6838 中进行了定义和标准化。

互联网号码分配局（IANA）负责跟踪所有官方 MIME 类型，你可以在媒体类型页面中找到最新的完整列表。

更多详细的内容可以查看 MDN MIME 类型（IANA 媒体类型）