DataTransfer: phương thức setData()

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.setData() đặt dữ liệu kéo của thao tác kéo thành dữ liệu và kiểu được chỉ định. Nếu dữ liệu cho kiểu đã cho không tồn tại, nó sẽ được thêm vào cuối kho dữ liệu kéo, sao cho mục cuối cùng trong danh sách types sẽ là kiểu mới. Nếu dữ liệu cho kiểu đã cho đã tồn tại, dữ liệu hiện có sẽ được thay thế ở cùng vị trí. Tức là thứ tự của danh sách types không thay đổi khi thay thế dữ liệu cùng kiểu.

Ví dụ về kiểu dữ liệu là text/plain và text/uri-list.

Cú pháp

setData(format, data)

Tham số

format: Một chuỗi đại diện cho kiểu dữ liệu kéo cần thêm vào DataTransfer.
data: Một chuỗi đại diện cho dữ liệu cần thêm vào DataTransfer.

Trong trình xử lý dragstart, chúng tôi sử dụng setData() để thêm id của phần tử <p> vào đối tượng DataTransfer.
Trong trình xử lý drop, chúng tôi lấy id và sử dụng nó để di chuyển phần tử <p> vào đích.

HTML

html

<div>
  <p id="source" draggable="true">
    Select this element, drag it to the drop zone and then release the selection
    to move the element.
  </p>
</div>
<div id="target">Drop Zone</div>

<button id="reset">Reset example</button>

CSS

css

div {
  margin: 0.5em 0;
  padding: 2em;
}

#target,
#source {
  border: 1px solid black;
  padding: 0.5rem;
}

.dragging {
  background-color: pink;
}

JavaScript

const source = document.querySelector("#source");
source.addEventListener("dragstart", (ev) => {
  console.log("dragStart");
  // Change the source element's background color
  // to show that drag has started
  ev.currentTarget.classList.add("dragging");
  // Clear the drag data cache (for all formats/types)
  ev.dataTransfer.clearData();
  // Set the drag's format and data.
  // Use the event target's id for the data
  ev.dataTransfer.setData("text/plain", ev.target.id);
});
source.addEventListener("dragend", (ev) =>
  ev.target.classList.remove("dragging"),
);

const target = document.querySelector("#target");
target.addEventListener("dragover", (ev) => {
  console.log("dragOver");
  ev.preventDefault();
});
target.addEventListener("drop", (ev) => {
  console.log("Drop");
  ev.preventDefault();
  // Get the data, which is the id of the source element
  const data = ev.dataTransfer.getData("text");
  const source = document.getElementById(data);
  ev.target.appendChild(source);
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());