Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Sự kiện nào xảy ra khi phần tử đang được kéo trong JavaScript?

Sự kiện ondrag kích hoạt liên tục trong quá trình phần tử đang được kéo.

Ví dụ

<!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 trái sang phải hoặc ngược lại.</p>
    <script>
      function dragStart(event) { event.dataTransfer.setData("Text", event.target.id); }
      function draggingNow(event) { document.getElementById("box").innerHTML = "Đang kéo...!"; }
      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>