DataTransfer: phương thức getData()
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.
Phương thức DataTransfer.getData() lấy dữ liệu kéo (dưới dạng chuỗi) cho kiểu được chỉ định. Nếu thao tác kéo không bao gồm dữ liệu, phương thức này trả về một chuỗi rỗng.
Ví dụ về kiểu dữ liệu là text/plain và text/uri-list.
Cú pháp
getData(format)
Tham số
format-
Một chuỗi đại diện cho kiểu dữ liệu cần lấy.
Giá trị trả về
Một chuỗi đại diện cho dữ liệu kéo cho format được chỉ định. Nếu thao tác kéo không có dữ liệu hoặc thao tác không có dữ liệu cho format được chỉ định, phương thức này trả về một chuỗi rỗng.
Lưu ý rằng DataTransfer.getData() có thể không trả về giá trị mong đợi, vì nó chỉ cho phép đọc và ghi dữ liệu cho các sự kiện được chỉ định. Trong các sự kiện dragstart và drop, việc truy cập dữ liệu là an toàn. Đối với tất cả các sự kiện khác, dữ liệu nên được coi là không khả dụng. Dù vậy, các mục và định dạng của chúng vẫn có thể được liệt kê.
Ví dụ
Ví dụ này cho thấy cách sử dụng các phương thức getData() và setData() của đối tượng DataTransfer.
HTML
<div id="div1">
<span id="drag" draggable="true">drag me to the other box</span>
</div>
<div id="div2"></div>
CSS
#div1,
#div2 {
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid #aaaaaa;
}
JavaScript
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const dragElement = document.getElementById("drag");
dragElement.addEventListener("dragstart", drag);
div1.addEventListener("dragover", allowDrop);
div2.addEventListener("dragover", allowDrop);
div1.addEventListener("drop", drop);
div2.addEventListener("drop", drop);
function allowDrop(allowDropEvent) {
allowDropEvent.target.style.color = "blue";
allowDropEvent.preventDefault();
}
function drag(dragEvent) {
dragEvent.dataTransfer.setData("text", dragEvent.target.id);
dragEvent.target.style.color = "green";
}
function drop(dropEvent) {
dropEvent.preventDefault();
const data = dropEvent.dataTransfer.getData("text");
dropEvent.target.appendChild(document.getElementById(data));
dragElement.style.color = "black";
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| HTML # dom-datatransfer-getdata-dev |