Sự kiện ondragleave
Định nghĩa và cách sử dụng
Sự kiện ondragleave xảy ra khi phần tử có thể kéo hoặc văn bản được chọn rời khỏi mục tiêu đặt hợp lệ.
Sự kiện ondragenter và ondragleave giúp người dùng hiểu rằng một phần tử có thể kéo sẽ sắp vào hoặc ra khỏi mục tiêu đặt. Ví dụ, có thể đặt màu nền khi phần tử vào mục tiêu đặt và xóa màu khi phần tử ra khỏi mục tiêu.
Kéo-thả là chức năng rất phổ biến trong HTML5. Đó là khi bạn "gắp" một đối tượng và kéo nó đến vị trí khác. Để học thêm, hãy đọc chúng tôi về Thả trong HTML5Hướng dẫn HTML của chúng tôi.
Ghi chú：Để làm cho phần tử có thể kéo, hãy sử dụng toàn cục Thuộc tính draggable của HTML5。
Lưu ý：Mặc định, liên kết và hình ảnh là có thể kéo, không cần thuộc tính draggable.
Trong các giai đoạn khác nhau của hoạt động kéo-thả, có rất nhiều sự kiện được sử dụng và có thể xảy ra:
Các sự kiện được kích hoạt trên mục tiêu có thể kéo (phần tử nguồn):
- ondragstart - Khi người dùng bắt đầu kéo phần tử xảy ra
- ondrag - Khi phần tử được kéo xảy ra
- ondragend - Khi người dùng hoàn thành việc kéo phần tử xảy ra
Các sự kiện được kích hoạt trên mục tiêu đặt:
- ondragenter - Khi phần tử đang kéo vào mục tiêu đặt xảy ra
- ondragover - Khi phần tử đang kéo trên mục tiêu đặt xảy ra
- ondragleave - Khi phần tử đang kéo ra khỏi mục tiêu đặt xảy ra
- ondrop - Khi phần tử đang kéo được đặt lên mục tiêu đặt xảy ra
Mẫu
Chạy JavaScript khi phần tử có thể kéo ra khỏi mục tiêu đặt:
<div ondragleave="myFunction(event)"></div>
Trang web có nhiều ví dụ TIY hơn ở dưới cùng.
Cú pháp
Trong HTML:
<element ondragleave="myScript">
Trong JavaScript:
object.ondragleave = function(){myScript};
Trong JavaScript, sử dụng phương pháp addEventListener() như sau：
object.addEventListener("dragleave", myScript);
Ghi chú：Internet Explorer 8 hoặc các phiên bản sớm hơn không hỗ trợ 方法 addEventListener()。
Chi tiết kỹ thuật
| Nổ bùng: | Hỗ trợ |
|---|---|
| Có thể hủy bỏ: | Không hỗ trợ |
| Loại sự kiện: | DragEvent |
| Thẻ HTML được hỗ trợ: | Tất cả các phần tử HTML |
| Phiên bản DOM: | Sự kiện cấp 3 |
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ sự kiện này.
| Sự kiện | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ondragleave | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Mẫu
D演示 tất cả các sự kiện kéo thả có thể
<p draggable="true" id="dragtarget">Kéo tôi!</p>
<div class="droptarget">Đặt ở đây!</div>
<script>
/* ----------------- Các sự kiện được kích hoạt trên mục tiêu kéo thả ----------------- */
document.addEventListener("dragstart", function(event) {
// Phương thức dataTransfer.setData() đặt loại dữ liệu và giá trị của dữ liệu bị kéo thả
event.dataTransfer.setData("Text", event.target.id);
// Khi bắt đầu kéo thả phần tử p, xuất ra một số văn bản
document.getElementById("demo").innerHTML = "Bắt đầu kéo thả phần tử p.";
// Thay đổi độ mờ của phần tử có thể kéo thả
event.target.style.opacity = "0.4";
});
// Khi kéo thả phần tử p, thay đổi màu văn bản của văn bản xuất ra
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Hoàn thành kéo thả phần tử p, xuất ra một số văn bản và đặt lại độ mờ
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Hoàn thành việc kéo thả phần tử p.";
event.target.style.opacity = "1";
});
/* ----------------- Các sự kiện được kích hoạt trên mục tiêu đặt ----------------- */
// Khi phần tử có thể kéo p vào droptarget, thay đổi樣式 viền của DIV
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// Theo mặc định, không thể đặt dữ liệu/element ở các phần tử khác. Để cho phép đặt, chúng ta phải ngăn chặn xử lý mặc định của phần tử
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// Khi phần tử có thể kéo p rời droptarget, đặt lại樣式 viền của DIV
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* Khi rơi - Ngăn chặn xử lý mặc định của trình duyệt đối với dữ liệu (mặc định mở liên kết khi đặt) */
Đặt lại màu văn bản và màu viền của DIV
Lấy dữ liệu đang kéo bằng phương thức dataTransfer.getData()
Dữ liệu đang kéo là ID của phần tử đang kéo ("drag1")
Chuyển phần tử đang kéo vào phần tử được đặt
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
