SortableContext สำหรับรายการที่จัดลำดับใหม่ได้

SortableContext เป็นองค์ประกอบเฉพาะทางสำหรับการลากและวางที่ครอบรายการซึ่งจัดลำดับใหม่ได้ ขณะที่ useDraggable และ useDroppable จัดการการลากและวางทั่วไป SortableContext จะจัดการกรณีที่ต้องจัดลำดับรายการในรายการใหม่ด้วยการลากไปยังตำแหน่งใหม่โดยเฉพาะ

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

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

ภายใน SortableContext รายการแต่ละรายการจะใช้ฮุก useSortable({ id }) แทน useDraggable โดย useSortable เป็นส่วนขยายที่ครอบคลุมความสามารถของ useDraggable และส่งคืนแอตทริบิวต์ ตัวรับฟังเหตุการณ์ setNodeRef และการแปลงแบบเดียวกัน พร้อมค่าเพิ่มเติมสำหรับการจัดเรียง เช่น isDragging และ overIndex

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

ไลบรารีนี้ส่งออกยูทิลิตี arrayMove(array, fromIndex, toIndex) จาก @dnd-kit/sortable ยูทิลิตีนี้ส่งคืนอาร์เรย์ใหม่ที่ย้ายรายการจาก fromIndex ไปยัง toIndex นี่เป็นวิธีมาตรฐานในการอัปเดตอาร์เรย์สถานะเมื่อการลากเพื่อจัดเรียงเสร็จสิ้น

ในการเรียกกลับ onDragEnd ของ DndContext สำหรับรายการที่จัดเรียงได้ ให้ค้นหาดัชนีเดิมและดัชนีใหม่โดยใช้ items.indexOf(event.active.id) และ items.indexOf(event.over?.id) หากดัชนีทั้งสองถูกต้องและแตกต่างกัน ให้เรียก setItems(arrayMove(items, oldIndex, newIndex)) เพื่อจัดเรียงอาร์เรย์ใหม่

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

ใช้การเปลี่ยนผ่านของ CSS กับพร็อพเพอร์ตีการแปลงของรายการที่จัดเรียงได้: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined ขณะที่รายการกำลังถูกลาก ไม่จำเป็นต้องมีการเปลี่ยนผ่าน เพราะรายการควรติดตามเคอร์เซอร์โดยตรง เมื่อรายการถูกเลื่อนออกจากตำแหน่ง การเปลี่ยนผ่านจะสร้างแอนิเมชันการเลื่อนที่ราบรื่น

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

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

เมื่อเรียกใช้ arrayMove ภายใน onDragEnd เพื่อจัดเรียงรายการที่จัดเรียงได้ จะต้องส่งอาร์กิวเมนต์ใดบ้าง

SortableContext ครอบรายการที่จัดลำดับใหม่ได้ และต้องมีอาร์เรย์ items ที่ประกอบด้วย ID ซึ่งไม่ซ้ำกัน รวมถึงกลยุทธ์สำหรับแนวตั้ง แนวนอน หรือตาราง รายการแต่ละรายการใช้ useSortable แทน useDraggable จึงมี isDragging และ overIndex เพิ่มขึ้น ใน onDragEnd ฟังก์ชัน arrayMove จะจัดเรียงอาร์เรย์ใหม่โดยใช้ดัชนีเดิมและดัชนีใหม่ การเปลี่ยนผ่านของ CSS บนการแปลงจะทำให้รายการที่ถูกเลื่อนเคลื่อนไหวอย่างราบรื่น