HTML Drag and Drop API

Khái niệm và cách sử dụng

Drag and Drop có ba trường hợp sử dụng riêng biệt: kéo các phần tử trong một trang, kéo dữ liệu ra khỏi trang, và kéo dữ liệu vào trang.

Cốt lõi của thao tác kéo liên quan đến ba thứ:

• Mục đang được kéo
• Dữ liệu cơ bản được chuyển
• Mục tiêu thả

Sự kiện kéo

HTML drag-and-drop sử dụng mô hình sự kiện DOM và sự kiện kéo kế thừa từ sự kiện chuột.

Các phần tử có thể kéo

Trong HTML, ảnh, liên kết và vùng chọn có thể kéo theo mặc định. Để làm cho phần tử tùy ý có thể kéo, đặt thuộc tính draggable thành giá trị "true".

<p id="p1" draggable="true">This element is draggable.</p>

Kho dữ liệu kéo

Bạn không thể chuyển đối tượng JavaScript trực tiếp sang các trang web tùy ý, vì vậy để chuyển dữ liệu, dữ liệu phải được tuần tự hóa thành chuỗi. Trong drag and drop, chuỗi này được đóng gói trong đối tượng DataTransferItem, cũng định nghĩa một type cụ thể (thường là MIME type).

Phương thức setData() có thể được sử dụng để thêm mục vào dữ liệu kéo:

function dragstartHandler(ev) {
  // Add different types of drag data
  ev.dataTransfer.setData("text/plain", ev.target.innerText);
  ev.dataTransfer.setData("text/html", ev.target.outerHTML);
  ev.dataTransfer.setData(
    "text/uri-list",
    ev.target.ownerDocument.location.href,
  );
}

const p1 = document.getElementById("p1");
p1.addEventListener("dragstart", dragstartHandler);

Mục tiêu thả

Bất kỳ phần tử nào cũng có thể trở thành mục tiêu thả bằng cách hủy sự kiện dragover kích hoạt trên nó bằng preventDefault().

<p id="target">Drop Zone</p>

const target = document.getElementById("target");

// Cancel dragover so that drop can fire
target.addEventListener("dragover", (ev) => {
  ev.preventDefault();
});
target.addEventListener("drop", (ev) => {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text/plain");
  ev.target.append(data);
});

Hướng dẫn

Các thao tác kéo

Mô tả các bước xảy ra trong quá trình kéo và thả.

Làm việc với kho dữ liệu kéo

Mô tả cách đọc và ghi vào kho dữ liệu kéo.

Kéo và thả file

Hướng dẫn thực hành triển khai giao diện cơ bản chấp nhận file kéo thả.

Bảng Kanban với drag and drop

Hướng dẫn thực hành triển khai bảng Kanban với kéo và thả phần tử.

Giao diện

DragEvent

Đối tượng sự kiện được truyền vào các trình xử lý sự kiện kéo.

DataTransfer

Giữ bất kỳ dữ liệu nào được chuyển giữa các ngữ cảnh, bao gồm các mục văn bản và mục file.

DataTransferItem

Đại diện cho một mục trong kho dữ liệu kéo, có thể là mục văn bản hoặc mục file.

DataTransferItemList

Đại diện cho danh sách các đối tượng DataTransferItem trong kho dữ liệu kéo.

Ví dụ

• Sao chép và di chuyển phần tử với giao diện DataTransfer
• Sao chép và di chuyển phần tử với giao diện DataTransferListItem

Thông số kỹ thuật

Xem thêm

• Drag Operations
• Working with the drag data store
• HTML Living Standard: Drag and Drop