DragEvent ใน HTML DOM

DragEvent ใน HTML DOM เป็นประเภทของเหตุการณ์ (event) ที่เกิดขึ้นเมื่อผู้ใช้ลากและวาง (drag and drop) องค์ประกอบหรือข้อความที่เลือก เหตุการณ์นี้ถูกนำมารองรับใน HTML5

คุณสมบัติ (Properties)

ไวยากรณ์ (Syntax)

object.ondragevent = function_name;

โดย function_name คือฟังก์ชันที่ต้องการให้ทำงานเมื่อเหตุการณ์เกิดขึ้น

ชนิดของเหตุการณ์ (Event Types)

ตัวอย่าง

ตัวอย่างการลากและวางองค์ประกอบ span ระหว่างสอง div:

<!DOCTYPE html>
<html>
<head>
<style>
  .DivDrop {
    float: left;
    width: 100px;
    height: 40px;
    margin: 10px;
    border: 1px solid blue;
    background-color: lightgreen;
    font-weight: bold;
  }
</style>
</head>
<body>
<h2>ตัวอย่าง DragEvent</h2>
<div class="DivDrop">
  <span id="spanDrag" draggable="true">Drag This!</span>
</div>
<div class="DivDrop"></div>
<p id="Sample" style="clear:both"></p>
<script>
  document.ondragstart = function(event) {
    event.dataTransfer.setData("Text", "spanDrag");
    document.getElementById("spanDrag").innerText = "drag Text";
    document.getElementById("spanDrag").style.backgroundColor = "lightgreen";
  };
  
  document.ondrag = function(event) {
    document.getElementById("Sample").innerHTML = "Span element is being dragged";
  };
  
  document.ondragover = function(event) {
    event.preventDefault();
  };
  
  document.ondrop = function(event) {
    event.preventDefault();
    if (event.target.className == "DivDrop") {
      var txt = event.dataTransfer.getData("Text");
      event.target.appendChild(document.getElementById(txt));
      document.getElementById(txt).innerText = "Dragged Text";
      document.getElementById(txt).style.backgroundColor = "lightyellow";
      document.getElementById("Sample").innerHTML = "The span element is dropped";
    }
  };
</script>
</body>
</html>

ผลลัพธ์

เริ่มต้นแสดงสองกล่องสีเขียวอ่อน กล่องแรกมีข้อความ "Drag This!"

เมื่อลากข้อความ จะเปลี่ยนเป็น "drag Text" และแสดงสถานะ "Span element is being dragged"

เมื่อวางในกล่องที่สอง ข้อความจะเปลี่ยนเป็น "Dragged Text" พร้อมพื้นหลังสีเหลืองอ่อน และแสดง "The span element is dropped"

คำอธิบายโค้ด

• สร้างสอง <div> ด้วยคลาส .DivDrop สำหรับสไตล์ร่วมกัน กล่องแรกมี <span> ที่ตั้งค่า draggable="true"
• ondragstart: ใช้ setData() เก็บข้อมูลประเภท "Text" และ id ของ span แล้วเปลี่ยนข้อความและสีพื้นหลัง
• ondrag: อัปเดตข้อความสถานะระหว่างการลาก
• ondragover: ใช้ event.preventDefault() เพื่ออนุญาตการวาง (drop) ซึ่งเป็นค่าเริ่มต้นที่บล็อกอยู่
• ondrop: ป้องกันค่าเริ่มต้น ตรวจสอบว่าเป้าหมายเป็นกล่อง class "DivDrop" แล้วดึงข้อมูลด้วย getData() ย้าย span ไปเป็นลูกของกล่องเป้าหมาย และอัปเดตรูปลักษณ์