Sự kiện ondrag

Sự kiện DOM DragEvent

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

Sự kiện ondrag xảy ra khi phần tử hoặc văn bản được kéo.

Kéo thả là một chức năng rất phổ biến trong HTML5. Đó là khi bạn "gripping" 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ề Điều khiển kéo thả HTML5tài liệu hướng dẫn HTML của chúng tôi.

Ghi 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 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 thao tá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 (phần tử nguồn):

  • ondragstart - Khi người dùng bắt đầu kéo thả phần tử.
  • ondrag - Khi phần tử được kéo.
  • ondragend - Khi người dùng hoàn thành việc kéo thả phần tử.

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 bước vào mục tiêu đặt.
  • ondragover - Khi phần tử đang bị kéo được đặt trên mục tiêu đặt.
  • ondragleave - Khi phần tử đang bị kéo rời khỏi mục tiêu đặt.
  • ondrop - Khi phần tử đang bị kéo được đặt lên mục tiêu đặt.

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

Ví dụ

Chạy JavaScript khi kéo thả phần tử <p>:

<p draggable="true" ondrag="myFunction(event)">Kéo tôi!</p>

Thử ngay

Có thêm nhiều ví dụ TIY ở dưới cùng của trang.

Ngữ pháp

Trong HTML:

<element ondrag="myScript">

Thử ngay

Trong JavaScript:

object.ondrag = function(){myScript};

Thử ngay

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

object.addEventListener("drag", myScript);

Thử ngay

Ghi 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: 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: Level 3 Events

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
ondrag 4.0 9.0 3.5 6.0 12.0

Các ví dụ khác

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">Rơi đây!</div>
<script>
/* ----------------- Các sự kiện được触发 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";
});
// Sau khi 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 đích đặt ----------------- */
// Khi phần tử p 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ử p có thể kéo 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 thả - 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 bị 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ử bị 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

Các trang liên quan

HTML Hướng dẫn:Điều khiển kéo thả HTML5

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

Sự kiện DOM DragEvent