Sự kiện ondragenter
Thí dụ
Thực thi JavaScript khi phần tử có thể kéo đi vào mục tiêu thả:
<div ondragenter="myFunction(event)"></div>
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Sự kiện ondragenter xảy ra khi phần tử có thể kéo hoặc lựa chọn văn bản đi vào mục tiêu thả hợp lệ.
Các sự kiện ondragenter và ondragleave có thể giúp người dùng hiểu rằng một phần tử có thể kéo sắp đi vào hoặc rời khỏi mục tiêu thả. Điều này có thể được thực hiện, ví dụ: đặt màu nền khi phần tử có thể kéo đi vào mục tiêu thả và xóa màu khi phần tử được di chuyển ra khỏi mục tiêu.
Kéo và thả là một tính năng rất phổ biến trong HTML5. Đó là khi bạn "lấy" một đối tượng và kéo nó đến một vị trí khác. Để biết thêm thông tin, hãy xem Hướng dẫn HTML của chúng tôi về Kéo và thả HTML5 .
Lưu ý: Để làm cho một phần tử có thể kéo, hãy sử dụng thuộc tính có thể kéo HTML5 chung .
Mẹo: Các liên kết và hình ảnh có thể kéo theo mặc định và không cần thuộc tính có thể kéo.
Có nhiều sự kiện được sử dụng và có thể xảy ra, trong các giai đoạn khác nhau của thao tác kéo và thả:
- 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 - xảy ra khi người dùng bắt đầu kéo một phần tử
- ondrag - xảy ra khi một phần tử đang được kéo
- ondragend - xảy ra khi người dùng kéo xong phần tử
- Các sự kiện được kích hoạt trên mục tiêu thả:
- ondragenter - xảy ra khi phần tử được kéo đi vào mục tiêu thả
- ondragover - xảy ra khi phần tử được kéo vượt quá mục tiêu thả
- ondragleave - xảy ra khi phần tử được kéo rời khỏi mục tiêu thả
- ondrop - xảy ra khi phần tử kéo được thả trên mục tiêu thả
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ sự kiện.
Event | |||||
---|---|---|---|---|---|
ondragenter | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Cú pháp
Trong HTML:
<element ondragenter="myScript">
Trong JavaScript:
object.ondragenter = function(){myScript};
Trong JavaScript, sử dụng phương thức addEventListener ():
object.addEventListener("dragenter", myScript);
Lưu ý: Phương thức addEventListener () không được hỗ trợ trong Internet Explorer 8 và các phiên bản trước đó.
Chi tiết kỹ thuật
Bong bóng: | Đúng |
---|---|
Có thể hủy bỏ: | Đúng |
Loại sự kiện: | DragEvent |
Các 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 |
Các ví dụ khác
Thí dụ
Trình diễn TẤT CẢ các sự kiện kéo và thả có thể có:
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
// Events fired on the drag target
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
// Events fired on the drop target
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
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>
Các trang liên quan
Hướng dẫn HTML: Kéo và thả HTML5
Tham chiếu HTML: Thuộc tính có thể kéo HTML