HTMLElement: sự kiện dragend
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 dragend được kích hoạt khi thao tác kéo kết thúc (bằng cách thả nút chuột hoặc nhấn phím Escape).
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("dragend", (event) => { })
ondragend = (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 lại độ mờ khi kết thúc kéo
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ó, rồi thả ra.
Chúng ta làm cho phần tử bán trong suốt khi đang kéo, và lắng nghe sự kiện dragend để đặt lại độ mờ của phần tử khi nó được thả.
Để xem ví dụ đầy đủ về kéo và thả, hãy xem trang dành cho sự kiện drag.
HTML
<div id="container">
<div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone"></div>
CSS
body {
/* Prevent the user from selecting text in the example */
user-select: none;
}
#draggable {
text-align: center;
background: white;
}
#container {
width: 200px;
height: 20px;
background: blueviolet;
padding: 10px;
}
.dragging {
opacity: 0.5;
}
JavaScript
const source = document.getElementById("draggable");
source.addEventListener("dragstart", (event) => {
// make it half transparent
event.target.classList.add("dragging");
});
source.addEventListener("dragend", (event) => {
// reset the transparency
event.target.classList.remove("dragging");
});
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| HTML # handler-ondragend |
| HTML # event-dnd-dragend |