พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน Drag and Drop API

Drag and Drop API ใน HTML5 เป็นเครื่องมือที่ช่วยให้ผู้ใช้สามารถลากวาง (drag and drop) องค์ประกอบจากตำแหน่งหนึ่งไปยังอีกตำแหน่งหนึ่งได้ในเว็บเบราว์เซอร์ ซึ่งสามารถนำไปประยุกต์ใช้งานในหลายสถานการณ์ เช่น การย้ายไฟล์ รูปภาพ ข้อความ หรือองค์ประกอบ HTML

ส่วนประกอบหลักของ Drag and Drop API

การใช้งานหลัก ๆ ของ Drag and Drop API มีขั้นตอนหลักอยู่ 2 ฝั่ง คือ

  1. ต้นทาง (drag source): องค์ประกอบที่สามารถลากได้
  2. ปลายทาง (drop target): องค์ประกอบที่สามารถวางสิ่งที่ลากมาได้

ขั้นตอนการใช้งาน Drag and Drop

  1. กำหนดองค์ประกอบที่ต้องการให้เป็นต้นทาง (drag source) ด้วยการใช้ attribute draggable="true"
  2. ใช้งานอีเวนต์ที่เกี่ยวข้อง เช่น dragstart, dragover, drop, dragend เป็นต้น
  3. ใช้เมธอด DataTransfer เพื่อจัดการข้อมูลที่ต้องการส่งระหว่างต้นทางและปลายทาง

อีเวนต์สำคัญ

  • dragstart: เมื่อเริ่มการลาก
  • drag: ระหว่างการลาก
  • dragover: เมื่ออยู่เหนือเป้าหมายการวาง
  • drop: เมื่อปล่อยการลากในเป้าหมาย
  • dragend: เมื่อสิ้นสุดการลาก

ตัวอย่างโค้ด

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drag and Drop Example</title>
  <style>
    #drag1 {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      text-align: center;
      line-height: 100px;
      margin-bottom: 10px;
    }

    #dropzone {
      width: 200px;
      height: 200px;
      background-color: lightgrey;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>
<body>

  <div id="drag1" draggable="true">Drag me</div>
  <div id="dropzone">Drop here</div>

  <script>
    const dragItem = document.getElementById("drag1");
    const dropZone = document.getElementById("dropzone");

    // เริ่มลาก
    dragItem.addEventListener("dragstart", (event) => {
      event.dataTransfer.setData("text", event.target.id); // เก็บข้อมูลการลาก
    });

    // ปลายทาง ต้องป้องกันค่า default เพื่อให้สามารถ drop ได้
    dropZone.addEventListener("dragover", (event) => {
      event.preventDefault();
    });

    // เมื่อปล่อยในปลายทาง
    dropZone.addEventListener("drop", (event) => {
      event.preventDefault();
      const data = event.dataTransfer.getData("text");
      const dragElement = document.getElementById(data);
      dropZone.appendChild(dragElement); // ย้าย element
    });
  </script>

</body>
</html>

การประยุกต์ใช้งาน

  1. การอัปโหลดไฟล์: Drag and Drop สามารถนำมาใช้ในการลากไฟล์เพื่ออัปโหลด เช่น ภาพหรือเอกสาร โดยผู้ใช้สามารถลากไฟล์จากเครื่องและวางลงในพื้นที่อัปโหลด
  2. การจัดเรียงรายการ: สามารถประยุกต์ในการจัดเรียงองค์ประกอบในลิสต์ เช่น จัดเรียงลำดับงานใน To-Do List โดยผู้ใช้สามารถลากแต่ละงานไปวางในตำแหน่งที่ต้องการ
  3. เกมหรือแอปพลิเคชันโต้ตอบ: การลากวางวัตถุในเกม เช่น เกมจิ๊กซอว์ หรือแอปพลิเคชันการศึกษาที่ให้ผู้ใช้จับคู่คำหรือวัตถุ

สรุป

Drag and Drop API ใน HTML5 เป็นเครื่องมือที่ช่วยให้การสร้างอินเทอร์เฟซแบบโต้ตอบง่ายขึ้น และสามารถประยุกต์ใช้ได้หลายสถานการณ์เช่น การอัปโหลดไฟล์ การจัดเรียงองค์ประกอบ หรือการสร้างเกม

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ