DataTransfer
DataTransfer 对象用于在上下文之间（例如拖放操作或剪贴板读写）传输数据。它可以包含一个或多个数据项，每个数据项具有一个或多个数据类型。
DataTransfer 最初是为 HTML 拖放 API 设计的，作为 DragEvent.dataTransfer 属性，并且仍然在 HTML 拖放部分中进行规范说明。但现在它也被其他 API 使用，例如 ClipboardEvent.clipboardData 和 InputEvent.dataTransfer。但是，其他 API 只使用其接口的某些部分，忽略 dropEffect 等属性。DataTransfer 的文档主要讨论其在拖放操作中的用法，您应该参考其他 API 的文档以了解 DataTransfer 在这些上下文中的用法。
构造函数
DataTransfer()-
创建并返回一个新的
DataTransfer对象。
实例属性
DataTransfer.dropEffect-
获取当前选定的拖放操作的类型，或将操作设置为新类型。该值必须是
none、copy、link或move。 DataTransfer.effectAllowed-
提供所有可能的操作类型。必须是
none、copy、copyLink、copyMove、link、linkMove、move、all或uninitialized之一。 DataTransfer.files只读-
包含数据传输中所有可用本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表。
DataTransfer.items只读-
提供一个
DataTransferItemList对象，它是一个所有拖动数据的列表。 DataTransfer.types只读-
一个字符串数组，给出在
dragstart事件中设置的格式。
实例方法
DataTransfer.addElement()实验性 非标准-
设置给定元素的拖动源。这将是触发
drag和dragend事件的元素，而不是默认目标（被拖动的节点）。Firefox 特有。 DataTransfer.clearData()-
删除与给定类型关联的数据。类型参数是可选的。如果类型为空或未指定，则删除与所有类型关联的数据。如果指定类型的数据不存在，或者数据传输中没有数据，则此方法无效。
DataTransfer.getData()-
检索给定类型的数据，如果该类型的数据不存在或数据传输中没有数据，则返回空字符串。
DataTransfer.setData()-
设置给定类型的数据。如果该类型的数据不存在，则将其添加到末尾，使类型列表中的最后一项成为新格式。如果该类型的数据已存在，则现有数据将在相同位置被替换。
DataTransfer.setDragImage()-
如果需要自定义拖动图像，请设置要使用的图像。
示例
本文档中列出的所有方法和属性都有自己的参考页面，每个参考页面要么直接包含该接口的示例，要么有指向示例的链接。
在粘贴或放置事件中读取数据
在以下示例中，我们有一个 <form>，其中包含三种不同类型的文本输入：一个文本 <input> 元素，一个 <textarea> 元素，以及一个 <div> 元素，其 contenteditable 设置为 true。用户可以将文本粘贴或放置到任何这些元素中，并将显示 ClipboardEvent.clipboardData 或 DragEvent.dataTransfer 对象中的数据。
HTML
<form>
<fieldset>
<legend><input /></legend>
<input type="text" />
<table class="center">
<tr>
<th scope="row">Operation type</th>
<td></td>
</tr>
<tr>
<th scope="row">Content type</th>
<td></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend><textarea /></legend>
<textarea></textarea>
<table class="center">
<tr>
<th scope="row">Operation type</th>
<td></td>
</tr>
<tr>
<th scope="row">Content type</th>
<td></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend><div contenteditable /></legend>
<div contenteditable></div>
<table class="center">
<tr>
<th scope="row">Operation type</th>
<td></td>
</tr>
<tr>
<th scope="row">Content type</th>
<td></td>
</tr>
</table>
</fieldset>
<p class="center">
<input type="reset" />
</p>
</form>
CSS
.center {
text-align: center;
}
form > fieldset > * {
vertical-align: top;
}
form input,
form textarea,
form [contenteditable] {
min-width: 15rem;
padding: 0.25rem;
}
[contenteditable] {
appearance: textfield;
display: inline-block;
min-height: 1rem;
border: 1px solid;
}
form table {
display: inline-table;
}
table ol {
text-align: left;
}
JavaScript
const form = document.querySelector("form");
function displayData(event) {
if (event.type === "drop") event.preventDefault();
const cells = event.target.nextElementSibling.querySelectorAll("td");
cells[0].textContent = event.type;
const transfer = event.clipboardData || event.dataTransfer;
const ol = document.createElement("ol");
cells[1].textContent = "";
cells[1].appendChild(ol);
for (const item of transfer.items) {
const li = document.createElement("li");
li.textContent = `${item.kind} ${item.type}`;
ol.appendChild(li);
}
}
form.addEventListener("paste", displayData);
form.addEventListener("drop", displayData);
form.addEventListener("reset", () => {
for (const cell of form.querySelectorAll("[contenteditable], td")) {
cell.textContent = "";
}
});
结果
规范
| 规范 |
|---|
| HTML # the-datatransfer-interface |
浏览器兼容性
加载中…