Tạo đoạn văn có thể kéo thả (draggable) trong HTML5

Sử dụng draggable="true" trên <p> (hoặc bất kỳ phần tử nào) để cho phép kéo. Cần xử lý các sự kiện Drag & Drop API để hoạt động hoàn chỉnh.

Ví dụ hoàn chỉnh

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      .drag { float: left; width: 100px; height: 75px; border: 1px 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">
        Đoạn văn này có thể 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(e) { e.dataTransfer.setData("Text", e.target.id); }
      function draggingNow(e) { document.getElementById("box").innerHTML = "Đã kéo thành công!"; }
      function dropNow(e) { e.preventDefault(); }
      function drop(e) {
        e.preventDefault();
        var data = e.dataTransfer.getData("Text");
        e.target.appendChild(document.getElementById(data));
        document.getElementById("box").innerHTML = "Phần tử đã thả thành công!";
      }
    </script>
  </body>
</html>

Lưu ý

• Phải e.preventDefault() trong ondragover để cho phép drop.
• Phần tử kéo cần id để nhận diện qua dataTransfer.
• Trên mobile: Drag & Drop API không hoạt động tốt, cần Pointer Events / Touch Events.