สร้างย่อหน้าที่ลากได้ (Draggable Paragraph) ใน HTML5

ใช้แอตทริบิวต์ draggable เพื่อสร้างย่อหน้าที่ลากได้ เปิดหรือปิดการลากด้วยค่า true และ false

ตัวอย่าง

คุณสามารถลองรันโค้ดต่อไปนี้เพื่อใช้งานองค์ประกอบ draggable และลากองค์ประกอบ:

<!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">นี่คือย่อหน้าสาธิตที่ลากได้!</p> 
    </div> 
    <div class="drag" ondrop="drop(event)" ondragover="dropNow(event)"></div> 
    <div id="box"></div> 
    <p>ลากกล่องซ้ายไปขวา หรือลากกล่องขวาไปซ้าย</p> 
    <script> 
      function dragStart(event) { 
        event.dataTransfer.setData("Text", event.target.id); 
      } 
      function draggingNow(event) { 
        document.getElementById("box").innerHTML = "ลากสำเร็จ!"; 
      } 
      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 = "วางองค์ประกอบสำเร็จ!"; 
      } 
    </script> 
  </body> 
</html>

รายละเอียดเหตุการณ์ Drag and Drop ดูได้จากบทความ ID 1004064000