สถาปัตยกรรม dnd-kit และการออกแบบที่คำนึงถึงการช่วยการเข้าถึงเป็นหลัก

react-beautiful-dnd เคยเป็นไลบรารีการลากและวางสำหรับ React ที่ได้รับความนิยม แต่ถูกเก็บเข้าสู่คลังอย่างเป็นทางการในปี 2023 และไม่มีการดูแลรักษาอีกต่อไป ชุมชนจึงหันมาใช้ dnd-kit อย่างรวดเร็วในฐานะตัวเลือกทดแทนที่แนะนำ ซึ่งออกแบบขึ้นใหม่ตั้งแต่ต้นโดยคำนึงถึง React สมัยใหม่และการเข้าถึงสำหรับทุกคน

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

dnd-kit มีเซนเซอร์ในตัวสามชนิด PointerSensor จัดการข้อมูลเข้าจากทั้งเมาส์และหน้าจอสัมผัสผ่าน API เหตุการณ์ตัวชี้แบบรวมเป็นหนึ่งเดียว KeyboardSensor รองรับการลากและวางด้วยแป้นพิมพ์เพียงอย่างเดียวอย่างสมบูรณ์ TouchSensor จัดการเหตุการณ์สัมผัสแบบเดิม คุณกำหนดค่าเซนเซอร์ผ่านพร็อพ sensors ของ DndContext

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

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

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

DndContext มีการเรียกกลับเหตุการณ์หลักสามรายการสำหรับติดตามวงจรการลาก onDragStart จะทำงานเมื่อผู้ใช้เริ่มลาก และได้รับ ID ของรายการที่กำลังลาก onDragOver จะทำงานอย่างต่อเนื่องขณะที่รายการที่ลากเคลื่อนที่อยู่เหนือเป้าหมายที่วางได้ onDragEnd จะทำงานเมื่อการลากเสร็จสิ้น โดยให้ทั้งรายการที่กำลังลากและเป้าหมายที่วาง

คุณส่งอาร์เรย์ของการกำหนดค่าเซนเซอร์ให้กับ DndContext โดยใช้พร็อพ sensors ร่วมกับฮุก useSensors เซนเซอร์แต่ละรายการจะเริ่มต้นด้วย useSensor(SensorClass, options) ตัวอย่างเช่น คุณสามารถกำหนดค่า PointerSensor ให้มีระยะลากขั้นต่ำ เพื่อป้องกันการลากโดยไม่ตั้งใจขณะคลิก

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

องค์ประกอบที่ลากได้และวางได้ทุกองค์ประกอบต้องมี ID ที่เป็นสตริงหรือตัวเลขและไม่ซ้ำกัน ID เหล่านี้เป็นวิธีหลักที่ dnd-kit ใช้ติดตามว่ากำลังลากอะไรและจะวางลงที่ใด ใน onDragEnd ให้ใช้ event.active.id เพื่ออ่าน ID ของรายการที่กำลังลาก และใช้ event.over?.id เพื่ออ่าน ID ของเป้าหมายที่วางได้สำหรับอัปเดตสถานะแอปพลิเคชัน

ต่างจากไลบรารีการลากและวางจำนวนมากที่มองว่าการรองรับแป้นพิมพ์เป็นสิ่งที่ค่อยเพิ่มภายหลัง dnd-kit วางการเข้าถึงไว้ที่แกนกลางของการออกแบบ KeyboardSensor เป็นความสามารถหลักระดับเดียวกับ PointerSensor ระบบจะจัดการแอตทริบิวต์ ARIA ทั้งหมดโดยอัตโนมัติ และคุณสามารถกำหนดการประกาศแบบกำหนดเองผ่านพร็อพ accessibility ของ DndContext

dnd-kit ใช้ปุ่มใดเพื่อยกเลิกการลากด้วยแป้นพิมพ์ที่กำลังดำเนินอยู่โดยไม่เปลี่ยนแปลงข้อมูล

dnd-kit มาแทนที่ react-beautiful-dnd ซึ่งถูกเก็บเข้าสู่คลังแล้ว และกลายเป็นมาตรฐานของชุมชนสำหรับการลากและวางใน React สถาปัตยกรรมของ dnd-kit มี DndContext เป็นศูนย์กลางสำหรับจัดการสถานะ มีเซนเซอร์สำหรับแยกชั้นข้อมูลเข้า (Pointer, Keyboard, Touch) และมีตัวปรับแต่งสำหรับจำกัดการเคลื่อนที่ การเข้าถึงเป็นความสามารถหลักที่มีมาในตัว ทั้งแอตทริบิวต์ ARIA การประกาศผ่านภูมิภาคถ่ายทอดสด และการนำทางด้วยแป้นพิมพ์อย่างสมบูรณ์