Thuộc tính sự kiện ondrag trong HTML

Thuộc tính sự kiện ondrag trong HTML được kích hoạt khi người dùng kéo (drag) một phần tử HTML trong tài liệu HTML. Các phần tử hình ảnh và liên kết (link) HTML được kéo theo mặc định nên không cần chỉ định thuộc tính ondrag trên chúng.

Cú pháp

Cú pháp như sau:

<tagname ondrag="script"></tagname>

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính sự kiện ondrag trong HTML:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
    }
    .drop-target {
      display: inline-block;
      width: 150px;
      height: 150px;
      border: 2px solid #FFF;
      margin: 1rem;
      vertical-align: middle;
      padding: 20px;
    }
    .circle {
      background: #db133a;
      height: 40px;
      width: 40px;
      border-radius: 50%;
    }
    .show {
      color: #fff;
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
<h1>Demo thuộc tính sự kiện ondrag trong HTML</h1>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" class="circle"></p>
</div>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p>Bây giờ hãy thử kéo và thả vòng tròn đỏ</p>
<div class="show"></div>
<script>
  function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
  }
  function dragging(event) {
    document.querySelector(".show").innerHTML = "Vòng tròn đang được kéo";
  }
  function allowDrop(event) {
    event.preventDefault();
  }
  function drop(event) {
    event.preventDefault();
    event.target.appendChild(document.querySelector('.circle'));
    document.querySelector(".show").innerHTML = "Vòng tròn đã được thả";
  }
</script>
</body>
</html>

Kết quả

Bây giờ hãy thử kéo và thả vòng tròn đỏ giữa hai hộp để quan sát cách thuộc tính sự kiện ondrag hoạt động.