Sự kiện ondragstart

Sự kiện DOM DragEvent

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

sự kiện ondragstart xảy ra khi người dùng bắt đầu kéo phần tử hoặc chọn văn bản.

Kéo thả là một tính năng rất phổ biến trong HTML5. Đó là khi bạn "cầm" 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 HTML5giáo trình 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 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 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ử bị kéo xảy ra
  • ondragend - Khi người dùng hoàn thành 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 xuống:

  • ondragenter - Khi phần tử bị kéo vào mục tiêu đặt xuống xảy ra
  • ondragover - Khi phần tử bị kéo trên mục tiêu đặt xuống xảy ra
  • ondragleave - Khi phần tử bị kéo rời khỏi mục tiêu đặt xuống xảy ra
  • ondrop - Khi phần tử bị kéo được đặt trên mục tiêu đặt xuống xảy ra

Ví dụ

Khi người dùng bắt đầu kéo <p> phần tử, thực thi JavaScript:

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

Thử trực tiếp

Dưới trang này có nhiều ví dụ TIY khác.

Cú pháp

Trong HTML:

<element ondragstart="myScript">

Thử trực tiếp

Trong JavaScript:

object.ondragstart = function(){myScript};

Thử trực tiếp

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

object.addEventListener("dragstart", myScript);

Thử trực tiếp

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

Bùng nổ: 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: 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
ondragstart 4.0 9.0 3.5 6.0 12.0

Các ví dụ thêm

Dự án minh họa cho 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 đoạn 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";
});
// Hoàn thành kéo thả phần tử p sau đó xuất ra một đoạn 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ử 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 ra 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 = "";
  }
});
/* Trên drop - 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 đang được kéo là ID của phần tử đang được kéo ("drag1")
Chèn phần tử đang được kéo 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ử trực tiếp

Các trang liên quan

HTML Hướng dẫn: Đ引き落とし HTML5

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

Sự kiện DOM DragEvent