Bảng lịch

Tài liệu tham khảo JS

JavaScript

Cửa sổ

DOM HTML

Web API

Đối tượng HTML

Khác

Khóa học tự chọn

Khóa học khuyến nghị:

Bộ công cụ CodeW3C.com

Sự kiện ondragover

Sự kiện DOM DragEvent

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

Khi phần tử kéo thả hoặc văn bản đã chọn được kéo thả vào mục tiêu đặt hợp lệ, sự kiện ondragover sẽ xảy ra.

Mặc định, không thể xóa dữ liệu/phần tử trong các phần tử khác. Để cho phép đặt, chúng tôi phải chặn xử lý mặc định của phần tử. Điều này được thực hiện bằng cách gọi phương thức event.preventDefault() của sự kiện ondragover.

Kéo 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 vị trí khác. Để tìm hiểu thêm, hãy đọc chúng tôi về Đưa rơi HTML5giáo trình HTML của chúng tôi.

Chú thích：Để làm cho phần tử có thể kéo thả, 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 thả, không cần thuộc tính draggable.

Trong các giai đoạn khác nhau của việc 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 kéo thả (phần tử nguồn):

ondragstart - Khi người dùng bắt đầu kéo thả phần tử sẽ xảy ra
ondrag - Khi phần tử được kéo thả sẽ xảy ra
ondragend - Khi người dùng hoàn thành việc kéo thả phần tử sẽ 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 bị kéo thả vào mục tiêu đặt sẽ xảy ra
ondragover - Khi phần tử đang bị kéo thả trên mục tiêu đặt sẽ xảy ra
ondragleave - Khi phần tử đang bị kéo thả rời khỏi mục tiêu đặt sẽ xảy ra
ondrop - Khi phần tử đang bị kéo thả được đặt vào mục tiêu đặt sẽ xảy ra

Chú thích：Khi kéo thả phần tử, sự kiện ondragover được kích hoạt mỗi 350 mili giây.

Mẫu

Thực thi JavaScript khi phần tử được kéo thả vào mục tiêu đặt:

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

Thử ngay

Có nhiều ví dụ TIY thêm ở dưới trang.

Ngữ pháp

Trong HTML:

<element ondragover="myScript">

Thử ngay

Trong JavaScript:

object.ondragover = function(){myScript};

Thử ngay

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

object.addEventListener("dragover", myScript);

Thử ngay

Chú thí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
ondragover	4.0	9.0	3.5	6.0	12.0

Các ví dụ thêm

Giải thích 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">Đổ ở đâ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 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元素, hiển thị 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 đầu ra
document.addEventListener("drag", function(event) {
  document.getElementById("demo").style.color = "red";
});
// Đã hoàn thành kéo thả phần tử p元素, hiển thị 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ử kéo được vào droptarget, thay đổi phong cách 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 hoặc phần tử 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ử kéo được rời khỏi droptarget, đặt lại phong cách 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 bị kéo là ID của phần tử bị kéo ("drag1")
Chè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>

Thử ngay