dnd kit
@dnd-kit
useDraggable และ useDroppable และจะไม่บังคับให้คุณออกแบบแอปของคุณใหม่หรือสร้างโหนด DOM แบบ Wrapper เพิ่มเติม@dnd-kit/sortable ซึ่งเป็นเลเยอร์บางๆ ที่สร้างอยู่ด้านบนของ @dnd-kit/core ค่าที่ตั้งล่วงหน้าเพิ่มเติมจะมาในอนาคต หากต้องการเรียนรู้วิธีเริ่มต้นใช้งาน dnd kit โปรดไปที่เว็บไซต์เอกสารอย่างเป็นทางการ คุณจะพบเอกสาร API เคล็ดลับและคำแนะนำเชิงลึกเพื่อช่วยคุณสร้างอินเทอร์เฟซแบบลากและวาง
ไลบรารีหลักของ dnd kit เปิดเผยแนวคิดหลักสองประการ:
เพิ่มส่วนประกอบที่มีอยู่ของคุณโดยใช้ตะขอ useDraggable และ useDroppable หรือรวมทั้งสองอย่างเข้าด้วยกันเพื่อสร้างส่วนประกอบที่สามารถลากและวางได้
จัดการเหตุการณ์และปรับแต่งลักษณะการทำงานขององค์ประกอบที่ลากได้และพื้นที่ที่วางได้โดยใช้ผู้ให้บริการ <DndContext> กำหนดค่าเซ็นเซอร์เพื่อจัดการกับวิธีการป้อนข้อมูลต่างๆ
ใช้คอมโพเนนต์ <DragOverlay> เพื่อแสดงภาพซ้อนทับแบบลากได้ซึ่งถูกลบออกจากโฟลว์เอกสารปกติและอยู่ในตำแหน่งที่สัมพันธ์กับวิวพอร์ต
ดูคู่มือเริ่มต้นใช้งานฉบับย่อของเราเพื่อเรียนรู้วิธีเริ่มต้นใช้งาน
ความสามารถในการขยายอยู่ที่แกนหลักของ dnd kit มันถูกสร้างขึ้นมาให้มีความบางและขยายได้ มันมาพร้อมกับคุณสมบัติที่เราเชื่อว่าคนส่วนใหญ่ต้องการเป็นส่วนใหญ่ และให้จุดขยายเพื่อสร้างส่วนที่เหลือไว้ด้านบนของ @dnd-kit/core
ตัวอย่างที่สำคัญของระดับความสามารถในการขยายของ dnd kit คือค่าที่ตั้งล่วงหน้า Sortable ซึ่งสร้างขึ้นโดยใช้จุดส่วนขยายที่เปิดเผยโดย @dnd-kit/core
จุดขยายหลักของ ชุด dnd คือ:
การสร้างอินเทอร์เฟซแบบลากและวางที่เข้าถึงได้นั้นเป็นเรื่องยาก dnd kit มีค่าเริ่มต้นและจุดเริ่มต้นที่เหมาะสมจำนวนหนึ่งเพื่อช่วยให้คุณเข้าถึงอินเทอร์เฟซแบบลากและวางได้:
aria ที่ควรส่งผ่านไปยังรายการที่ลากได้ดูคู่มือการช่วยสำหรับการเข้าถึงของเราเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับวิธีที่คุณสามารถช่วยมอบประสบการณ์ที่ดีขึ้นให้กับโปรแกรมอ่านหน้าจอ
ต่างจากไลบรารีแบบลากและวางส่วนใหญ่ dnd kit ไม่ได้ ถูกสร้างขึ้นโดยเจตนาบน HTML5 Drag and drop API นี่เป็นการตัดสินใจทางสถาปัตยกรรมโดยเจตนา ซึ่งมาพร้อมกับข้อดีข้อเสียที่คุณควรทราบก่อนตัดสินใจใช้งาน แต่สำหรับการใช้งานส่วนใหญ่ เราเชื่อว่าคุณประโยชน์มีมากกว่าข้อดีข้อเสีย
API การลากและวาง HTML5 มี ข้อจำกัด ร้ายแรงบางประการ ไม่รองรับอุปกรณ์สัมผัสหรือใช้แป้นพิมพ์เพื่อลากรายการ ซึ่งหมายความว่าไลบรารีที่ถูกสร้างขึ้นด้านบนจำเป็นต้องเปิดเผยการใช้งานที่แตกต่างไปจากเดิมอย่างสิ้นเชิงเพื่อรองรับวิธีการป้อนข้อมูลเหล่านั้น นอกจากนี้ยังไม่รองรับกรณีการใช้งานทั่วไป เช่น การล็อคการลากไปยังแกนเฉพาะหรือขอบเขตของคอนเทนเนอร์ กลยุทธ์การตรวจจับการชนกันแบบกำหนดเอง หรือแม้แต่การปรับแต่งการแสดงตัวอย่างของรายการที่ลาก
แม้ว่าจะมีวิธีแก้ไขปัญหาเหล่านี้บางส่วน แต่วิธีแก้ปัญหาเหล่านี้มักจะเพิ่มความซับซ้อนของโค้ดเบสและขนาดบันเดิลโดยรวมของไลบรารี และนำไปสู่ความไม่สอดคล้องกันระหว่างเลเยอร์เมาส์ ระบบสัมผัส และคีย์บอร์ด เนื่องจากเลเยอร์เหล่านี้ขับเคลื่อนโดยการใช้งานที่แตกต่างกันโดยสิ้นเชิง
ข้อดีข้อเสียหลัก ๆ ที่ไม่ใช้ HTML5 Drag and drop API คือ คุณจะไม่สามารถลากจากเดสก์ท็อปหรือระหว่างหน้าต่างได้ หากกรณีการใช้งานแบบลากและวางที่คุณมีอยู่ในใจเกี่ยวข้องกับฟังก์ชันการทำงานประเภทนี้ คุณจะต้องใช้ไลบรารีที่สร้างขึ้นจาก HTML 5 Drag and drop API อย่างแน่นอน เราขอแนะนำเป็นอย่างยิ่งให้คุณลองใช้ react-dnd สำหรับไลบรารี React ที่มีแบ็กเอนด์แบบลากและวาง HTML 5 แบบเนทีฟ
dnd kit ช่วยให้คุณสร้างอินเทอร์เฟซแบบลากและวางโดยไม่ต้องเปลี่ยน DOM ทุกครั้งที่รายการจำเป็นต้องเปลี่ยนตำแหน่ง
สิ่งนี้เป็นไปได้เนื่องจาก dnd kit คำนวณและจัดเก็บตำแหน่งเริ่มต้นและเค้าโครงของคอนเทนเนอร์แบบหยดของคุณอย่างเกียจคร้านเมื่อเริ่มต้นการดำเนินการลาก ตำแหน่งเหล่านี้จะถูกส่งต่อไปยังส่วนประกอบของคุณที่ใช้ useDraggable และ useDroppable เพื่อให้คุณสามารถคำนวณตำแหน่งใหม่ของรายการของคุณในขณะที่การดำเนินการลากกำลังดำเนินอยู่ และย้ายไปยังตำแหน่งใหม่โดยใช้คุณสมบัติ CSS ที่มีประสิทธิภาพซึ่งไม่ทำให้เกิดการทาสีใหม่ เช่น translate3d และ scale สำหรับตัวอย่างวิธีการบรรลุเป้าหมายนี้ โปรดดูการใช้กลยุทธ์การเรียงลำดับที่เปิดเผยโดยไลบรารี @dnd-kit/sortable
นี่ไม่ได้เป็นการบอกว่าคุณไม่สามารถเปลี่ยนตำแหน่งของรายการใน DOM ในขณะที่ลากได้ นี่เป็นสิ่งที่ ได้รับการสนับสนุน และบางครั้งก็หลีกเลี่ยงไม่ได้ ในบางกรณี คุณจะไม่สามารถทราบล่วงหน้าได้ว่าตำแหน่งและเค้าโครงใหม่ของรายการใดเป็นตำแหน่งใด จนกว่าคุณจะย้ายไปยัง DOM โปรดทราบว่าการเปลี่ยนแปลง DOM ประเภทนี้ขณะลากมีราคาแพงกว่ามากและจะทำให้เกิดการทาสีใหม่ ดังนั้น หากเป็นไปได้ ให้เลือกการคำนวณตำแหน่งใหม่โดยใช้ translate3d และ scale
dnd kit ยังใช้ SyntheticEvent Listener สำหรับเหตุการณ์ Activator ของเซ็นเซอร์ทั้งหมด ซึ่งนำไปสู่ประสิทธิภาพที่ดีขึ้นกว่าการเพิ่ม Listener เหตุการณ์ด้วยตนเองไปยังแต่ละโหนดที่ลากได้
@dnd-kit@dnd-kit/core@dnd-kit/accessibility@dnd-kit/sortable@dnd-kit/modifiers@dnd-kit/utilities คุณจะต้องติดตั้งการอ้างอิงทั้งหมดในไดเร็กทอรีราก เนื่องจาก @dnd-kit เป็น monorepo ที่ใช้ Lerna และ Yarn Workspaces จึงไม่รองรับ npm CLI (เฉพาะเส้นด้าย)
yarn installสิ่งนี้จะติดตั้งการขึ้นต่อกันทั้งหมดในแต่ละโปรเจ็กต์ สร้างและเชื่อมโยงพวกมันผ่าน Lerna
ในเทอร์มินัลหนึ่ง ให้ yarn start ต้นแบบขนาน:
yarn start สิ่งนี้จะสร้างแต่ละแพ็คเกจเป็น <packages>/<package>/dist และรันโปรเจ็กต์ในโหมดดู ดังนั้นการแก้ไขใด ๆ ที่คุณบันทึกไว้ภายใน <packages>/<package>/src ทำให้เกิดการสร้างใหม่เป็น <packages>/<package>/dist ผลลัพธ์จะสตรีมไปยังเทอร์มินัล
yarn start:storybookเรียกใช้หนังสือนิทาน เปิด http://localhost:6006 เพื่อดูในเบราว์เซอร์
คุณสามารถเล่นกับแพ็คเกจท้องถิ่นได้ในสนามเด็กเล่นที่ขับเคลื่อนด้วย Parcel
yarn start:playground นี่จะเป็นการเริ่ม Playground บน localhost:1234 หากคุณมี lerna running watch ในโหมดขนานในเทอร์มินัลเดียว แล้วคุณรันพัสดุ Playground ของคุณจะโหลดซ้ำทันทีเมื่อคุณทำการเปลี่ยนแปลงกับโมดูลที่นำเข้าซึ่งมีแหล่งที่มาอยู่ภายใน packages/*/src/* โปรดทราบว่าเพื่อให้บรรลุผลนี้ คำสั่ง start ของแต่ละแพ็คเกจจะส่งแฟล็ก --noClean ให้กับ TDSX วิธีนี้จะป้องกันไม่ให้พัสดุระเบิดระหว่างการสร้างใหม่เนื่องจากข้อผิดพลาด File Not Found
เคล็ดลับด้านความปลอดภัยที่สำคัญ: เมื่อเพิ่ม/แก้ไขแพ็กเกจใน Playground ให้ใช้ออบเจ็กต์ alias ใน package.json การดำเนินการนี้จะบอกให้ Parcel แก้ไขไปยังระบบไฟล์แทนที่จะพยายามติดตั้งแพ็คเกจจาก NPM นอกจากนี้ยังแก้ไขข้อผิดพลาด React ที่ซ้ำกันที่คุณอาจพบ
(ในเทอร์มินัลที่สาม) คุณสามารถเรียกใช้ Cypress และจะทำการทดสอบการรวมกับหนังสือนิทาน
