DndContext, useDraggable และ useDroppable

ฟีเจอร์การลากและวางทุกฟีเจอร์ใน dnd-kit ต้องห่อด้วยคอมโพเนนต์ DndContext DndContext เป็นศูนย์กลางการประสานงาน โดยติดตามการลากที่กำลังทำงาน สื่อสารระหว่างองค์ประกอบที่ลากได้กับองค์ประกอบที่วางได้ และเรียกกลับเหตุการณ์ โดยทั่วไปคุณจะวางคอมโพเนนต์นี้ไว้ในระดับของคอมโพเนนต์ที่จัดการสถานะการลาก

ฮุก useDraggable({ id }) ทำให้คอมโพเนนต์สามารถลากได้ ฮุกนี้ส่งคืนค่าหลักสี่รายการ ได้แก่ attributes (พร็อพ ARIA ที่นำไปกระจายบนองค์ประกอบ) listeners (ตัวจัดการเหตุการณ์สำหรับเริ่มการลาก) setNodeRef (เชื่อมต่อรีเฟอเรนซ์ขององค์ประกอบที่ลากได้) และ transform (การเลื่อนปัจจุบันในรูป {x, y, scaleX, scaleY})

ในการเชื่อมต่อองค์ประกอบที่ลากได้ ให้นำ attributes และ listeners ไปกระจายบนองค์ประกอบ และส่ง setNodeRef เป็นพร็อพ ref attributes ประกอบด้วย role="button", tabIndex และพร็อพ aria ต่าง ๆ listeners จะเชื่อมต่อตัวจัดการเหตุการณ์ของตัวชี้และแป้นพิมพ์ที่ dnd-kit ต้องใช้เพื่อตรวจจับการเริ่มลาก

ค่า transform จาก useDraggable จะเป็น null เมื่อไม่ได้ลาก และเป็นออบเจ็กต์พิกัดเมื่อกำลังลาก คุณจะแปลงค่านี้เป็นสตริง CSS โดยใช้ CSS.Translate.toString(transform) จากแพ็กเกจ @dnd-kit/utilities จากนั้นนำค่านี้ไปใช้เป็นคุณสมบัติ CSS transform บนองค์ประกอบที่ลากได้ เพื่อให้องค์ประกอบเคลื่อนตามเคอร์เซอร์บนหน้าจอ

ฮุก useDroppable({ id }) จะกำหนดให้คอนเทนเนอร์เป็นเป้าหมายที่วางได้ ฮุกนี้ส่งคืนค่า isOver (ค่าบูลีนที่เป็นจริงขณะที่องค์ประกอบที่ลากได้เลื่อนอยู่เหนือพื้นที่วางได้) และ setNodeRef สำหรับเชื่อมต่อรีเฟอเรนซ์กับองค์ประกอบที่วางได้ ต่างจาก useDraggable ตรงที่ไม่ต้องนำตัวฟังเหตุการณ์ใด ๆ ไปกระจาย

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

การเรียกกลับ onDragEnd บน DndContext จะได้รับออบเจ็กต์เหตุการณ์ที่มีคุณสมบัติสำคัญสองรายการ ได้แก่ event.active ซึ่งมีรายการที่กำลังลาก (รวมถึง id ของรายการนั้น) และ event.over ซึ่งมีเป้าหมายที่วางได้ (หรือเป็นค่า null หากวางนอกองค์ประกอบที่วางได้ทั้งหมด) คุณจะใช้ ID เหล่านี้เพื่ออัปเดตสถานะของแอปพลิเคชัน

ใน onDragEnd หลังจากตรวจสอบว่า event.over ไม่เป็นค่าว่างแล้ว ให้คุณอัปเดตสถานะเพื่อสะท้อนการย้าย ตัวอย่างเช่น หากกำลังย้ายการ์ดระหว่างคอลัมน์ในกระดานคัมบัง ให้ลบการ์ดออกจากคอลัมน์ต้นทางและเพิ่มลงในคอลัมน์เป้าหมายที่ระบุโดย event.over.id

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

ในการแสดงผลเนื้อหาที่ถูกต้องใน DragOverlay ให้ติดตามว่ารายการใดกำลังถูกลากอยู่โดยใช้การเรียกกลับ onDragStart เก็บ ID ที่กำลังทำงานไว้ในสถานะ: setActiveDragId(event.active.id) ใน onDragEnd ให้รีเซ็ตเป็นค่าว่าง ภายใน DragOverlay ให้ใช้ activeDragId เพื่อค้นหารายการที่ถูกต้องแล้วแสดงผล

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

ยูทิลิตีใดแปลงออบเจ็กต์ transform จาก useDraggable ให้เป็นสตริงการแปลงของ CSS

DndContext เป็นศูนย์กลางการประสานงานสำหรับการดำเนินการลากทั้งหมด useDraggable มอบแอตทริบิวต์ ตัวรับฟังเหตุการณ์ setNodeRef และการแปลงสำหรับองค์ประกอบที่ลากได้ useDroppable มอบ isOver และ setNodeRef สำหรับเป้าหมายการวาง onDragEnd มอบ event.active.id และ event.over?.id ให้คุณใช้อัปเดตสถานะ DragOverlay แสดงภาพตัวอย่างแบบลอยผ่านพอร์ทัล