Sự kiện ondragenter

Sự kiện DOM DragEvent

Khóa học đề xuất:

Định nghĩa và cách sử dụng

Sự kiện ondragenter xảy ra khi phần tử có thể kéo-thả hoặc văn bản được chọn vào 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-thả sắp vào hoặc rời 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ử rời khỏi mục tiêu đặt. Truyền và kéo HTML5của chúng tôi. Kéo-thả là chức 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 vị trí khác. Để học thêm, hãy đọc chúng tôi về

Chú ý:Để làm cho phần tử có thể kéo-thả, hãy sử dụng hướng dẫn HTML toàn cục Thuộc tính draggable trong HTML5。

Lưu ý:Mặc định, liên kết và hình ảnh là có thể kéo-thả, 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 xảy ra trên mục tiêu 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 xảy ra 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 nằm trên mục tiêu đặt xảy ra
  • ondragleave - Khi phần tử đang kéo rời 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

Ví dụ

Chạy JavaScript khi phần tử có thể kéo vào mục tiêu đặt:

<div ondragenter="myFunction(event)"></div>

Thử ngay

Trang có nhiều ví dụ TIY khác ở dưới cùng.

Cú pháp

Trong HTML:

<element ondragenter="myScript">

Thử ngay

Trong JavaScript:

object.ondragenter = function(){myScript};

Thử ngay

Trong JavaScript, sử dụng phương thức addEventListener():

object.addEventListener("dragenter", myScript);

Thử ngay

Chú ý:Trình duyệt Internet Explorer 8 hoặc sớm hơn không hỗ trợ Phương thức addEventListener()。

Chi tiết kỹ thuật

Nổ bùng: Hỗ trợ
Có thể hủy bỏ: 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
ondragenter 4.0 9.0 3.5 6.0 12.0

Các ví dụ thêm

Giải thích về các sự kiện kéo thả có thể xảy ra:

<p draggable="true" id="dragtarget">Kéo tôi!</p>
<div class="droptarget">Đặt tại đâ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 sắc của văn bản xuất ra
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Sau khi 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 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";
  }
});
// Mặc định, không thể đặt dữ liệu/element vào 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 rời khỏ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 kéo bằng phương thức dataTransfer.getData()
Dữ liệu có thể kéo là ID của phần tử có thể kéo ("drag1")
Chỉnh sửa phần tử có thể kéo để gắn vào phần tử đặ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>

Thử ngay

Các trang liên quan

Hướng dẫn HTML: Drag và Drop trong HTML5

HTML Tài liệu tham khảo: Thuộc tính draggable của HTML

Sự kiện DOM DragEvent