โอเวอร์เลย์การลากกำหนดเองและ DnD หลายคอนเทนเนอร์

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

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

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

เมื่อใช้ DragOverlay รายการที่ลากได้ต้นฉบับควรกลายเป็นตัวแทนทางภาพขณะกำลังลาก หากใช้ useSortable ให้ตั้งค่าความทึบเป็นศูนย์หรือใช้เส้นขอบประเมื่อ isDragging เป็นจริง วิธีนี้จะแสดง “ช่อง” ที่รายการจะกลับไปอยู่หากยกเลิกการลาก และแสดงช่องว่างที่รายการทิ้งไว้เมื่อย้ายไปยังตำแหน่งใหม่

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

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

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

useDraggable และ useSortable รองรับตัวเลือก data: useSortable({ id, data: { containerId, type } }) ข้อมูลนี้พร้อมใช้งานในการเรียกกลับเหตุการณ์การลากในรูปแบบ event.active.data.current ในสถานการณ์ที่มีหลายคอนเทนเนอร์ คุณสามารถเก็บ ID ของคอนเทนเนอร์ต้นทางไว้ในข้อมูล และใช้ใน onDragOver เพื่อทราบว่ารายการมาจากที่ใด

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

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

DndContext รองรับพร็อพ collisionDetection ซึ่งกำหนดวิธีคำนวณว่ารายการที่กำลังลากอยู่เหนือพื้นที่วางใด ค่าเริ่มต้น closestCenter ทำงานได้ดีกับรายการส่วนใหญ่ closestCorners เหมาะกับตารางมากกว่า ส่วน pointerWithin จะเปิดใช้งานพื้นที่วางได้ก็ต่อเมื่อเคอร์เซอร์อยู่ภายในพื้นที่นั้นจริง ๆ

DragOverlay แสดงผลเนื้อหาของตนไว้ที่ใดใน DOM

DragOverlay แสดงผลเป็นพอร์ทัลไปยัง document.body จึงเป็นอิสระจากข้อจำกัดของการจัดวาง ให้ติดตาม activeDragId ใน onDragStart/onDragEnd เพื่อแสดงผลเนื้อหาโอเวอร์เลย์ที่ถูกต้อง การลากและวางหลายคอนเทนเนอร์ใช้ SortableContext หลายอินสแตนซ์ภายใน DndContext เดียว โดยมี ID ที่ไม่ซ้ำกันในภาพรวม อัปเดตสถานะใน onDragOver เพื่อให้แอนิเมชันข้ามคอนเทนเนอร์ราบรื่น โดยใช้ event.active.data.current สำหรับข้อมูลเมตาของคอนเทนเนอร์ต้นทาง