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

Thuộc tính sự kiện ondrop kích hoạt khi một phần tử có thể kéo được thả vào một vùng drop hợp lệ.

Cú pháp

<tagname ondrop="script"></tagname>

Ví dụ

<!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 ondrop</h1>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" ondrag="drag(event)" draggable="true" class="circle"></p>
</div>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<p>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 drag(event) { document.querySelector(".show").innerHTML = "Đang kéo..."; }
  function allowDrop(event) { event.preventDefault(); }
  function drop(event) {
    event.preventDefault();
    event.target.appendChild(document.querySelector('.circle'));
    document.querySelector(".show").innerHTML = "Đã thả!";
  }
</script>
</body>
</html>

Kết quả

Kéo vòng tròn đỏ và thả vào ô trống → hiển thị "Đã thả!" và vòng tròn di chuyển vào ô mới.