DataTransfer
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Đối tượng DataTransfer được sử dụng để lưu trữ bất kỳ dữ liệu nào được truyền giữa các ngữ cảnh, chẳng hạn như thao tác kéo và thả, hoặc đọc/ghi clipboard. Nó có thể chứa một hoặc nhiều mục dữ liệu, mỗi mục thuộc một hoặc nhiều kiểu dữ liệu.
DataTransfer được thiết kế chủ yếu cho HTML Drag and Drop API, như thuộc tính DragEvent.dataTransfer, và vẫn được đặc tả trong phần kéo và thả HTML, nhưng hiện tại cũng được sử dụng bởi các API khác, chẳng hạn như ClipboardEvent.clipboardData và InputEvent.dataTransfer. Tuy nhiên, các API khác chỉ sử dụng một số phần nhất định của giao diện, bỏ qua các thuộc tính như dropEffect. Tài liệu về DataTransfer sẽ tập trung chủ yếu vào việc sử dụng trong các thao tác kéo và thả, và bạn nên tham khảo tài liệu của các API khác để biết cách sử dụng DataTransfer trong các ngữ cảnh đó.
Hàm khởi tạo
DataTransfer()-
Tạo và trả về một đối tượng
DataTransfermới.
Thuộc tính phiên bản
DataTransfer.dropEffect-
Lấy loại thao tác kéo và thả hiện đang được chọn hoặc đặt thao tác thành loại mới. Giá trị phải là
none,copy,linkhoặcmove. DataTransfer.effectAllowed-
Cung cấp tất cả các loại thao tác có thể thực hiện. Phải là một trong
none,copy,copyLink,copyMove,link,linkMove,move,allhoặcuninitialized. DataTransfer.filesRead only-
Chứa danh sách tất cả các tệp cục bộ có sẵn trong quá trình truyền dữ liệu. Nếu thao tác kéo không liên quan đến việc kéo tệp, thuộc tính này là một danh sách rỗng.
DataTransfer.itemsRead only-
Cung cấp một đối tượng
DataTransferItemListlà danh sách tất cả dữ liệu kéo. DataTransfer.typesRead only-
Một mảng các chuỗi cung cấp các định dạng đã được thiết lập trong sự kiện
dragstart.
Phương thức phiên bản
DataTransfer.addElement()Experimental Non-standard-
Đặt nguồn kéo cho phần tử đã cho. Đây sẽ là phần tử mà các sự kiện
dragvàdragendđược kích hoạt, chứ không phải đích mặc định (nút đã được kéo). Dành riêng cho Firefox. DataTransfer.clearData()-
Xóa dữ liệu liên quan đến một kiểu nhất định. Tham số kiểu là tùy chọn. Nếu kiểu rỗng hoặc không được chỉ định, dữ liệu liên quan đến tất cả các kiểu sẽ bị xóa. Nếu dữ liệu cho kiểu được chỉ định không tồn tại, hoặc quá trình truyền dữ liệu không chứa dữ liệu nào, phương thức này sẽ không có tác dụng.
DataTransfer.getData()-
Lấy dữ liệu cho một kiểu nhất định, hoặc một chuỗi rỗng nếu dữ liệu cho kiểu đó không tồn tại hoặc quá trình truyền dữ liệu không chứa dữ liệu nào.
DataTransfer.setData()-
Đặt dữ liệu cho một kiểu nhất định. Nếu dữ liệu cho kiểu không tồn tại, nó sẽ được thêm vào cuối, sao cho mục cuối cùng trong danh sách các kiểu sẽ là định dạng mới. Nếu dữ liệu cho kiểu đã tồn tại, dữ liệu hiện có sẽ được thay thế ở cùng vị trí.
DataTransfer.setDragImage()-
Đặt hình ảnh được sử dụng để kéo nếu muốn hình ảnh tùy chỉnh.
Ví dụ
Mỗi phương thức và thuộc tính được liệt kê trong tài liệu này đều có trang tham khảo riêng và mỗi trang tham khảo hoặc trực tiếp bao gồm một ví dụ về giao diện, hoặc có liên kết đến một ví dụ.
Đọc dữ liệu trong sự kiện dán hoặc thả
Trong ví dụ sau, chúng tôi có một <form> chứa ba loại đầu vào văn bản khác nhau: một phần tử <input> dạng text, một phần tử <textarea>, và một phần tử <div> với contenteditable được đặt thành true. Người dùng có thể dán hoặc thả văn bản vào bất kỳ phần tử nào trong số này, và dữ liệu trong đối tượng ClipboardEvent.clipboardData hoặc DragEvent.dataTransfer sẽ được hiển thị.
HTML
<form>
<fieldset>
<legend><input /></legend>
<input type="text" />
<table class="center">
<tbody>
<tr>
<th scope="row">Operation type</th>
<td></td>
</tr>
<tr>
<th scope="row">Content type</th>
<td></td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset>
<legend><textarea /></legend>
<textarea></textarea>
<table class="center">
<tbody>
<tr>
<th scope="row">Operation type</th>
<td></td>
</tr>
<tr>
<th scope="row">Content type</th>
<td></td>
</tr>
</tbody>
</table>
</fieldset>
<fieldset>
<legend><div contenteditable /></legend>
<div contenteditable></div>
<table class="center">
<tbody>
<tr>
<th scope="row">Operation type</th>
<td></td>
</tr>
<tr>
<th scope="row">Content type</th>
<td></td>
</tr>
</tbody>
</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 = "";
}
});
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| HTML # the-datatransfer-interface |