Thực thi script tại bắt đầu thao tác kéo (drag) trong HTML?

Sử dụng thuộc tính ondragstart trong HTML để thực thi script tại bắt đầu thao tác kéo.

Ví dụ

Bạn có thể chạy mã sau để triển khai thuộc tính ondragstart:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      .drag {
        float: left;
        width: 100px;
        height: 35px;
        border: 2px dashed #876587;
        margin: 15px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)">
      <p ondragstart="dragStart(event)" ondrag="draggingNow(event)" draggable="true" id="dragtarget">Kéo!</p>
    </div>
    <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)"></div>
    <div id="box"></div>
    <p>Kéo hộp bên trái sang phải hoặc hộp bên phải sang trái.</p>
    <script>
      function dragStart(event) {
        event.dataTransfer.setData("Text", event.target.id);
      }
      function draggingNow(event) {
        document.getElementById("box").innerHTML = "Đã kéo thành công!";
      }
      function dropNow(event) {
        event.preventDefault();
      }
      function drop(event) {
        event.preventDefault();
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
        document.getElementById("box").innerHTML = "Phần tử đã thả thành công!";
      }
    </script>
  </body>
</html>