HTMLElement: sự kiện dragenter
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 dragenter được kích hoạt khi một phần tử đang kéo hoặc vùng văn bản được chọn vào một vùng thả hợp lệ. Đối tượng đích là vùng chọn tức thì của người dùng (phần tử người dùng chỉ trực tiếp làm vùng thả), hoặc phần tử <body>.
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("dragenter", (event) => { })
ondragenter = (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ụ
Tạo kiểu cho vùng thả khi dragenter
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 lắng nghe sự kiện dragenter để tô màu tím nền vùng chứa kia khi phần tử đang kéo ở phía trên, báo hiệu rằng phần tử có thể được thả vào đó.
Tuy nhiên, trong ví dụ một phần này, chúng ta chưa triển khai thả: để xem ví dụ đầy đủ 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;
}
.dropzone.dragover {
background-color: purple;
}
JavaScript
const target = document.getElementById("drop-target");
target.addEventListener("dragenter", (event) => {
// highlight potential drop target when the draggable element enters it
if (event.target.classList.contains("dropzone")) {
event.target.classList.add("dragover");
}
});
target.addEventListener("dragleave", (event) => {
// reset background of potential drop target when the draggable element leaves it
if (event.target.classList.contains("dropzone")) {
event.target.classList.remove("dragover");
}
});
Kết quả
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # handler-ondragenter |
| HTML # event-dnd-dragenter |