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

Thuộc tính sự kiện ondragstart kích hoạt khi người dùng bắt đầu kéo một phần tử hoặc văn bản có thể kéo (draggable) trong HTML.

Cú pháp

<tagname ondragstart="script"></tagname>

Ví dụ

Demo kéo thả (drag & drop) đơn giản:

<!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 ondragstart</h1>
<div class="drop-target" ondrop="drop(event)" ondragover="allowDrop(event)">
  <p ondragstart="dragStart(event)" ondragend="dragEnd(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 đỏ giữa hai ô</p>
<div class="show"></div>
<script>
  function dragStart(event) {
    event.dataTransfer.setData("Text", event.target.id);
    document.querySelector(".show").innerHTML = "Bắt đầu kéo vòng tròn đỏ.";
  }
  function dragEnd(event) {
    document.querySelector(".show").innerHTML = "Kết thúc kéo.";
  }
  function allowDrop(event) { event.preventDefault(); }
  function drop(event) {
    event.preventDefault();
    event.target.appendChild(document.querySelector('.circle'));
  }
</script>
</body>
</html>

Kết quả

Kéo vòng tròn đỏ từ ô trái sang ô phải → thông báo "Bắt đầu kéo" xuất hiện khi bắt đầu kéo.

Quan trọng: Phần tử kéo phải có draggable="true". Sự kiện ondragover trên target phải gọi preventDefault() để cho phép drop.