HTMLElement: sự kiện dragstart
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 dragstart được kích hoạt khi người dùng bắt đầu kéo một phần tử hoặc vùng văn bản được chọn.
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("dragstart", (event) => { })
ondragstart = (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 độ mờ khi bắt đầu 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ắng nghe sự kiện dragstart để làm cho phần tử bán trong suốt khi đang kéo.
Để 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
| Thông số kỹ thuật |
|---|
| HTML # handler-ondragstart |
| HTML # event-dnd-dragstart |