HTML5 คือ ตอนที่ 6 : การลากและวาง (Drag-and-Drop API)

03ก.ย. 2023 by รับทำแอพ สบายไอที
  1. การทำความเข้าใจพื้นฐาน
  2. การตั้งค่าโครงสร้าง HTML
  3. การจัดการเหตุการณ์ลาก (Drag Events)
  4. กรณีการใช้งานขั้นสูงในการทำเว็บและทำแอพ
  5. ข้อควรพิจารณาข้ามแพลตฟอร์ม (Cross-platform)
  6. ปฏิบัติที่ดีที่สุด (Best Practices)

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

1. การทำความเข้าใจพื้นฐาน

ก่อนที่จะเจาะลึกโค้ด จำเป็นต้องเข้าใจแนวคิดพื้นฐานเบื้องหลัง API แบบลากแล้วปล่อย โดยพื้นฐานแล้ว การลากและวางเกี่ยวข้องกับเหตุการณ์หลักสามเหตุการณ์:

  1. Drag Start ( dragstart) : เกิดขึ้นเมื่อผู้ใช้เริ่มลากรายการ
  2. Drag Over ( dragover) : เริ่มทำงานเมื่อรายการที่ลากได้อยู่เหนือเป้าหมายการวาง
  3. ดรอป ( drop) : เกิดขึ้นเมื่อรายการที่ลากถูกปล่อยเหนือเป้าหมายดรอป

คุณสามารถแนบเหตุการณ์เหล่านี้กับองค์ประกอบ HTML และกำหนดลักษณะการทำงานที่คุณต้องการเห็นในแต่ละเหตุการณ์ได้

2. การตั้งค่าโครงสร้าง HTML

สำหรับการสาธิต เรามาสร้างเลย์เอาต์ HTML ธรรมดาที่มีรายการสินค้าที่สามารถลากลงในคอนเทนเนอร์ได้

<!DOCTYPE html>
<html>
  <head>
    <title>Drag-and-Drop Demo</title>
  </head>
  <body>
    <ul id="dragList">
      <li draggable="true">Item 1</li>
      <li draggable="true">Item 2</li>
      <li draggable="true">Item 3</li>
    </ul>
    <div id="dropContainer">
      Drop items here.
    </div>
  </body>
</html>

แอตทริบิวต์ draggable="true" ระบุว่าสามารถลากรายการได้ เป็น dropContainer ที่ที่เราจะวางรายการเหล่านี้

3. การจัดการเหตุการณ์ลาก (Drag Events)

ในการจัดการกับเหตุการณ์ลาก คุณจะต้องเพิ่มตัวฟังเหตุการณ์ให้กับองค์ประกอบ HTML ที่เกี่ยวข้อง สำหรับตัวอย่างนี้ JavaScript จะเป็นเครื่องมือที่เราเลือก

const dragItems = document.querySelectorAll('#dragList li');
const dropContainer = document.getElementById('dropContainer');

dragItems.forEach((item) => {
  item.addEventListener('dragstart', handleDragStart);
});

dropContainer.addEventListener('dragover', handleDragOver);
dropContainer.addEventListener('drop', handleDrop);

function handleDragStart(e) {
  e.dataTransfer.setData('text/plain', e.target.innerText);
}

function handleDragOver(e) {
  e.preventDefault();
}

function handleDrop(e) {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  e.target.innerHTML += `<p>${data}</p>`;
}

handleDragStart()

ฟังก์ชันนี้จะตั้งค่าข้อมูลที่จะถูกถ่ายโอนระหว่างการลากและวาง วิธีการ dataTransfer.setData() ระบุชนิดข้อมูลและข้อมูลจริง ในตัวอย่างของเรา เราใช้ ‘ข้อความ/ธรรมดา’ และดึงข้อความจากองค์ประกอบที่ถูกลาก

handleDragOver()

เหตุการณ์ dragover จะต้องได้รับการป้องกันเพื่อให้เหตุการณ์ drop เกิดขึ้น มิฉะนั้น ลักษณะการทำงานเริ่มต้นจะรบกวนการดำเนินการปล่อยแบบกำหนดเอง

handleDrop()

ในฟังก์ชันนี้ เราระบุสิ่งที่จะเกิดขึ้นเมื่อผู้ใช้วางรายการลงในไฟล์ dropContainer วิธี getData() การดึงชุดข้อมูลใน handleDragStart() ซึ่งจากนั้นจะถูกเพิ่มลงในไฟล์ dropContainer.

4. กรณีการใช้งานขั้นสูงในการทำเว็บและทำแอพ

API แบบลากแล้วปล่อยสามารถใช้กับแอปพลิเคชันที่ซับซ้อนต่างๆ ในการทำเว็บและทำแอพ:

  1. ระบบอัพโหลดไฟล์ : ผู้ใช้สามารถลากไฟล์จากระบบและวางลงในเว็บแอปพลิเคชันได้
  2. บอร์ดคัมบัง (Kanban Boards) : บอร์ดอย่าง Trello ใช้การลากและวางเพื่อย้ายงานระหว่างสถานะต่างๆ
  3. เกมแบบโต้ตอบ : เกมเช่นปริศนาหรือแบบทดสอบเรียงลำดับรายการ
  4. การปรับแต่งผลิตภัณฑ์อีคอมเมิร์ซ : การลากและวางส่วนประกอบเพื่อปรับแต่งผลิตภัณฑ์ ซึ่งมีประโยชน์ในการทำเว็บและทำแอพมือถือ
  5. ระบบการจัดการเนื้อหา : สำหรับการจัดเรียงลำดับโพสต์ รูปภาพ หรือสื่ออื่นๆ
  6. แอพเพื่อการศึกษา : ในเว็บเพื่อการศึกษาหรือแอพมือถือที่นักเรียนสามารถจับคู่หรือจัดเรียงรายการได้

5. ข้อควรพิจารณาข้ามแพลตฟอร์ม (Cross-platform)

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

6. ปฏิบัติที่ดีที่สุด (Best Practices)

  1. การเข้าถึง : ใช้บทบาท ARIA เพื่อระบุพื้นที่ลากและวางสำหรับเครื่องมือการเข้าถึง
  2. ผลตอบรับ : ให้ผลตอบรับด้วยภาพเมื่อไอเทมถูกคว้า กำลังลาก หรือเกินเป้าหมายที่อาจตก
  3. การสนับสนุนระบบสัมผัส : เนื่องจากอุปกรณ์ระบบสัมผัสไม่รองรับการลากและวางโดยธรรมชาติ คุณจึงอาจจำเป็นต้องใช้กิจกรรมระบบสัมผัสด้วยตนเอง
  4. การทดสอบ : การทดสอบข้ามเบราว์เซอร์และอุปกรณ์ถือเป็นสิ่งสำคัญสำหรับประสบการณ์ผู้ใช้ที่สอดคล้องกัน
  5. ประสิทธิภาพ : หลีกเลี่ยงการคำนวณหนักในตัวจัดการเหตุการณ์แบบลากและวางเพื่อให้อินเทอร์เฟซตอบสนอง

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

HTML5 คืออะไร

HTML5 คือ ตอนที่ 5 : กราฟิก (Graphics) และเอฟเฟกต์ (Effects)
HTML5 คือ ตอนที่ 7 : Geolocation API ในการทำแอพและทำเว็บ