HTMLElement: sự kiện drop
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.
Sự kiện drop được kích hoạt khi một phần tử hoặc vùng văn bản được thả vào một vùng thả hợp lệ. Để đảm bảo sự kiện drop luôn kích hoạt như mong đợi, bạn nên luôn gọi preventDefault() trong phần xử lý sự kiện dragover.
Sự kiện này có thể hủy và có thể nổi bọt lên đến các đối tượng Document và Window.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt thuộc tính trình xử lý sự kiện.
addEventListener("drop", (event) => { })
ondrop = (event) => { }
Loại sự kiện
Thuộc tính sự kiện
Ngoài các thuộc tính liệt kê dưới đây, các thuộc tính từ giao diện cha Event cũng có sẵn.
DragEvent.dataTransferRead only-
Dữ liệu được truyền trong quá trình kéo và thả.
Ví dụ
Ví dụ kéo và thả tối giản
Trong ví dụ này, có một phần tử có thể kéo bên trong một vùng chứa. Hãy thử nắm phần tử, kéo nó qua vùng chứa kia, rồi thả ra.
Chúng ta sử dụng ba trình xử lý sự kiện ở đây:
- Trong trình xử lý sự kiện
dragstart, chúng ta lấy tham chiếu đến phần tử người dùng kéo - Trong trình xử lý sự kiện
dragovercủa vùng chứa đích, chúng ta gọievent.preventDefault(), cho phép nó nhận sự kiệndrop. - Trong trình xử lý sự kiện
dropcủa vùng thả, chúng ta xử lý việc di chuyển phần tử có thể kéo từ vùng chứa gốc đến vùng thả.
Để xem ví dụ đầy đủ hơn về kéo và thả, hãy xem trang dành cho sự kiện drag.
HTML
<div class="dropzone">
<div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="drop-target"></div>
CSS
body {
/* Prevent the user from selecting text in the example */
user-select: none;
}
#draggable {
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin: 10px;
padding: 10px;
}
JavaScript
let dragged = null;
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
// store a ref. on the dragged elem
dragged = event.target;
});
const target = document.getElementById("drop-target");
target.addEventListener("dragover", (event) => {
// prevent default to allow drop
event.preventDefault();
});
target.addEventListener("drop", (event) => {
// prevent default action (open as a link for some elements)
event.preventDefault();
// move dragged element to the selected drop target
if (event.target.className === "dropzone") {
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
});
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| HTML # handler-ondrop |
| HTML # event-dnd-drop |