วิธีใช้ HTML Drag and Drop API

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

พื้นฐานของการลากและวางใน HTML

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

หากต้องการเปิดใช้งานฟังก์ชันการลากและวางในเว็บแอปพลิเคชัน จำเป็นต้องระบุองค์ประกอบที่มีจุดประสงค์เพื่อการจัดการผ่านการใช้แอตทริบิวต์"ลากได้"ในมาร์กอัป HTML ที่เกี่ยวข้อง ด้วยการตั้งค่าของแอตทริบิวต์นี้เป็น"จริง"เช่นในตัวอย่างที่ให้ไว้ ผู้ใช้จะสามารถย้ายหรือเปลี่ยนตำแหน่งองค์ประกอบที่กำหนดภายในอินเทอร์เฟซผ่านการลากและวาง

 <div draggable="true">This element is draggable</div>

เมื่อเริ่มต้นการดำเนินการลากโดยใช้เหตุการณ์อินพุตที่ผู้ใช้สร้างขึ้นซึ่งเรียกว่า"เหตุการณ์ลาก"เว็บเบราว์เซอร์จะจัดเตรียมการแสดงตัวยึดตำแหน่งที่เรียกว่ารูปภาพ"โกสต์"ตามอัตภาพ ภาพนี้ทำหน้าที่ระบุและให้ข้อเสนอแนะเกี่ยวกับสถานะหรือความคืบหน้าขององค์ประกอบที่อยู่ระหว่างการจัดการผ่านกระบวนการลาก

คุณมีตัวเลือกในการปรับแต่งภาพประกอบนี้ในแบบของคุณโดยการจัดเตรียมเนื้อหาภาพของคุณเองมาแทนที่ ซึ่งสามารถทำได้โดยการเลือกส่วนประกอบที่สามารถเคลื่อนย้ายได้จาก Document Object Model (DOM) การสร้างภาพใหม่เพื่อใช้เป็นกราฟิกตอบรับที่ได้รับการปรับแต่ง และผสมผสาน

 let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';

document.querySelector('div').addEventListener('dragstart', (event)=>{
    event.dataTransfer.setDragImage(img, 10, 10);
})

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

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

 const dropElement = document.querySelector("drop-target");

dropElement.addEventListener("dragenter", (ev) => {
  ev.preventDefault();
});

dropElement.addEventListener("dragover", (ev) => {
  ev.preventDefault();
});

ทำความเข้าใจอินเทอร์เฟซ DragEvent

JavaScript มีอินเทอร์เฟซ DragEvent ซึ่งสรุปการโต้ตอบแบบลากและวางของผู้ใช้ ต่อไปนี้คือเหตุการณ์บางประเภทที่เกี่ยวข้องกับอินเทอร์เฟซนี้:

ขณะที่อยู่ในกระบวนการลากองค์ประกอบใดองค์ประกอบหนึ่ง ผู้ใช้จะทริกเกอร์เหตุการณ์"ลาก"

เหตุการณ์ Dragend จะถูกทริกเกอร์เมื่อการดำเนินการลากเสร็จสิ้น ไม่ว่าจะเกิดจากการปล่อยปุ่มเมาส์หรือการกดปุ่ม Escape

เหตุการณ์ Dragenter ถูกทริกเกอร์โดยองค์ประกอบที่ถูกลากขณะที่เคลื่อนผ่านเป้าหมายการวางที่ถูกต้อง ซึ่งอาจบ่งบอกถึงการกระทำหรือการโต้ตอบที่เกี่ยวข้องกับการย้ายข้อมูลจากที่หนึ่งไปยังอีกที่หนึ่งในส่วนติดต่อผู้ใช้

เหตุการณ์"dragleave"จะถูกทริกเกอร์เมื่อองค์ประกอบที่ถูกลากหยุดการวางตำแหน่งไว้เหนือหรือด้านบนของเป้าหมายการวางโดยเฉพาะ เหตุการณ์นี้ทำหน้าที่เป็นคู่กันกับเหตุการณ์"dragenter"ซึ่งเกิดขึ้นเมื่อองค์ประกอบที่ถูกลากเข้าสู่เป้าหมายการปล่อยที่เป็นไปได้ในตอนแรก

ในระหว่างกระบวนการลากส่วนประกอบที่สามารถจัดการได้ผ่านพื้นที่เปิดกว้าง การกระทำของผู้ใช้จะกระตุ้นเหตุการณ์ที่เกิดขึ้น

เมื่อเริ่มต้น เหตุการณ์"dragstart"จะถูกทริกเกอร์ให้เริ่มการลาก

เมื่อได้รับข้อมูลจากผู้ใช้ เราจะเริ่มการดำเนินการ"วาง"ภายในระบบของเรา เหตุการณ์นี้จะถูกทริกเกอร์เมื่อผู้ใช้ปล่อยรายการที่ด้านบนของพื้นที่เป้าหมายที่กำหนดซึ่งออกแบบมาเพื่อวัตถุประสงค์ดังกล่าว

เมื่อไฟล์ถูกถ่ายโอนไปยังเว็บเบราว์เซอร์ผ่านวิธีการภายนอก เช่น เครื่องมือจัดการไฟล์ของระบบปฏิบัติการ เบราว์เซอร์จะไม่เริ่มต้นเหตุการณ์"dragstart"หรือ"dragend"ตามปกติเพื่อตอบสนอง

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

 const customDragStartEvent = new DragEvent('dragstart', {
    dataTransfer: new DataTransfer(),
})

const customDragEndEvent = new DragEvent('dragend');

ในข้อมูลโค้ดที่กล่าวมาข้างต้น customDragStartEvent เป็นการยกตัวอย่างคลาส DragEvent() ซึ่งมีพารามิเตอร์ Constructor สองตัว พารามิเตอร์เริ่มต้นแสดงถึงประเภทเฉพาะของเหตุการณ์ลาก ครอบคลุมประเภทเหตุการณ์ที่เป็นไปได้เจ็ดประเภทที่ระบุไว้ก่อนหน้านี้

พารามิเตอร์ตัวที่สองแสดงถึงออบเจ็กต์ที่มีคุณสมบัติชื่อ"dataTransfer"ซึ่งสอดคล้องกับอินสแตนซ์ของอินเทอร์เฟซ DataTransfer อินเทอร์เฟซนี้จะมีการสำรวจเพิ่มเติมโดยละเอียดยิ่งขึ้นตลอดทั้งคู่มือนี้ หากต้องการเข้าถึงองค์ประกอบที่ต้องการภายใน Document Object Model (DOM) ให้ทำตามขั้นตอนเหล่านี้…

 const draggableElement = document.querySelector("#draggable");

จากนั้นเพิ่มผู้ฟังเหตุการณ์เช่นนี้:

   draggableElement.addEventListener('dragstart', (event) => {
    console.log('Drag started!');
    event.dataTransfer.setData('text/plain', 'Hello, world!');
   });

  draggableElement.addEventListener('dragend', () => {
    console.log('Drag ended!');
  });

ใน Listener เหตุการณ์เริ่มต้น เราได้ใช้ฟังก์ชันเรียกกลับที่บันทึกข้อความ"Drag start!“ในขณะเดียวกันก็เรียกเมธอด setData บนคุณสมบัติ dataTransfer ของอ็อบเจ็กต์ event สิ่งนี้ช่วยให้เราสามารถเริ่มต้นกิจกรรมที่กำหนดเองของเราได้อย่างราบรื่น

 draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

การถ่ายโอนข้อมูลด้วย dataTransfer

ออบเจ็กต์การถ่ายโอนข้อมูลทำหน้าที่เป็นตัวเชื่อมต่อตัวกลางระหว่างองค์ประกอบเริ่มต้น ซึ่งเป็นเอนทิตีที่ลากได้ และผู้รับที่ต้องการ หรือภูมิภาคที่ปล่อยได้ ในระหว่างกระบวนการลากและวาง ระบบจะทำหน้าที่เป็นพื้นที่เก็บข้อมูลชั่วคราวที่ออกแบบมาเพื่อจัดเก็บข้อมูลที่มีจุดประสงค์เพื่อใช้ร่วมกันระหว่างทั้งสองเอนทิตี

ความอเนกประสงค์ของข้อมูลนี้เห็นได้จากความสามารถในการรองรับหลายรูปแบบ รวมถึงข้อความ, URLS และประเภทข้อมูลที่กำหนดเอง ซึ่งช่วยให้มีฟังก์ชันการลากและวางที่หลากหลาย

การใช้ setData() เพื่อบรรจุข้อมูล

ในการถ่ายทอดข้อมูลจากส่วนประกอบที่สามารถจัดการได้ไปยังตัวรับ คุณสามารถใช้ประโยชน์จากความสามารถของเมธอด setData() ที่ได้รับการตกแต่งโดยออบเจ็กต์ dataTransfer วิธีนี้ทำให้คุณสามารถสรุปข้อมูลที่คุณตั้งใจจะส่งไปพร้อมกับระบุประเภทข้อมูลได้ด้วย ภาพประกอบพื้นฐานแสดงไว้ด้านล่าง:

 element.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Hello, world!');
});

เมื่อเริ่มดำเนินการย้ายรายการที่กำหนดว่ามีคุณสมบัติเฉพาะ เราจะส่งข้อความที่มีข้อมูล"สวัสดีชาวโลก!“ในรูปแบบที่กำหนดเป็นข้อความ/ธรรมดา เนื้อหานี้เชื่อมโยงถึงกันด้วยการลาก และต่อมาสามารถดึงข้อมูลได้โดยผู้รับวัตถุที่ทิ้งในระหว่างกระบวนการปล่อย

การดึงข้อมูลด้วย getData()

ภายในขอบเขตขององค์ประกอบที่สามารถทิ้งและลงทะเบียนสำหรับความสามารถนี้ผ่านการใช้งานตัวฟังเหตุการณ์ เราอาจดึงข้อมูลที่ถูกส่งโดยใช้เมธอด getData() :

 element.addEventListener('drop', (event) => {
  const transferredData = event.dataTransfer.getData('text/plain');
  console.log(`Received data: ${transferredData}`);
});

ส่วนโค้ดที่กล่าวมาข้างต้นจะดึงข้อมูลของการจำแนกประเภทเนื้อหาเดียวกัน (ข้อความ/ธรรมดา) ที่ได้รับการกำหนดขึ้นโดยขั้นตอน setData() ก่อนหน้านี้ ด้วยเหตุนี้ จึงทำให้สามารถรับและแก้ไขข้อมูลที่ลำเลียงได้ตามความต้องการของสภาพแวดล้อมของส่วนประกอบที่หยดได้

ใช้เคสสำหรับอินเทอร์เฟซแบบลากและวาง

การรวมความสามารถแบบลากและวางภายในเว็บแอปพลิเคชันถือเป็นการอัปเกรดที่มีศักยภาพสูง แต่การทำความเข้าใจสถานการณ์และเหตุผลเฉพาะในการใช้คุณลักษณะนี้จึงเป็นสิ่งสำคัญ

ด้วยการทำให้ผู้ใช้สามารถถ่ายโอนไฟล์จากโปรแกรมสำรวจไฟล์หรือเดสก์ท็อปของคอมพิวเตอร์ของตนได้อย่างง่ายดายโดยใช้ดรอปโซนที่กำหนด กระบวนการในการส่งเนื้อหาสื่อจึงมีความคล่องตัวและทำให้ใช้งานง่ายยิ่งขึ้น

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

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

คำนึงถึงการเข้าถึงเสมอ

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