HTML DOM DragEvent (Sự kiện kéo thả)

DragEvent là kiểu sự kiện được kích hoạt khi người dùng kéo và thả văn bản hoặc phần tử đã chọn. Sự kiện này được giới thiệu trong HTML5.

Thuộc tính

Cú pháp

object.ondragevent = function_name;

Trong đó function_name là hàm xử lý sẽ thực thi khi sự kiện xảy ra.

Các loại sự kiện DragEvent

Ví dụ

Ví dụ minh họa kéo thả một phần tử <span> giữa hai ô <div>:

<!DOCTYPE html>
<html>
<head>
<style>
  .DivDrop {
    float: left;
    width: 100px;
    height: 40px;
    margin: 10px;
    border: 1px solid blue;
    background-color: lightgreen;
    font-weight: bold;
  }
</style>
</head>
<body>
<h2>Ví dụ DragEvent</h2>
<div class="DivDrop">
  <span id="spanDrag" draggable="true">Kéo cái này!</span>
</div>
<div class="DivDrop"></div>
<p id="Sample" style="clear:both"></p>
<script>
  document.ondragstart = function(event) {
    event.dataTransfer.setData("Text", "spanDrag");
    document.getElementById("spanDrag").innerText = "đang kéo";
    document.getElementById("spanDrag").style.backgroundColor = "lightgreen";
  };
  document.ondrag = function(event) {
    document.getElementById("Sample").innerHTML = "Phần tử span đang được kéo";
  };
  document.ondragover = function(event) {
    event.preventDefault(); // Cho phép thả
  };
  document.ondrop = function(event) {
    event.preventDefault();
    if (event.target.className == "DivDrop") {
      var txt = event.dataTransfer.getData("Text");
      event.target.appendChild(document.getElementById(txt));
      document.getElementById(txt).innerText = "Đã thả";
      document.getElementById(txt).style.backgroundColor = "lightyellow";
      document.getElementById("Sample").innerHTML = "Phần tử span đã được thả";
    }
  };
</script>
</body>
</html>

Kết quả

• Ban đầu: Ô đầu tiên chứa văn bản "Kéo cái này!" trên nền xanh nhạt.
• Khi kéo: Văn bản thay thành "đang kéo", thông báo "Phần tử span đang được kéo" hiển thị.
• Khi thả vào ô thứ hai: Văn bản chuyển sang ô thứ hai, đổi thành "Đã thả" với nền vàng nhạt, thông báo cập nhật.

Giải thích chi tiết

• Hai <div> cùng class "DivDrop" dùng chung CSS. Ô đầu tiên chứa <span id="spanDrag" draggable="true">.
• ondragstart: Gọi setData("Text", "spanDrag") để lưu ID phần tử kéo. Thay đổi giao diện phần tử đang kéo.
• ondrag: Cập nhật thông báo trạng thái.
• ondragover: Gọi preventDefault() để cho phép thả (trình duyệt mặc định chặn thả).
• ondrop: Ngăn hành vi mặc định, kiểm tra đích là ô "DivDrop", lấy dữ liệu ID, di chuyển phần tử <span> vào ô đích, cập nhật giao diện và thông báo.