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 |
瀏覽器相容性
載入中…