Seni Bina dnd-kit dan Reka Bentuk Mengutamakan Kebolehcapaian

react-beautiful-dnd ialah pustaka seret dan lepas pilihan utama untuk React, tetapi telah diarkibkan secara rasmi pada 2023 dan tidak lagi diselenggara. Komuniti segera memilih dnd-kit sebagai pengganti yang disyorkan, yang direka dari awal dengan mengambil kira React moden dan kebolehcapaian.

dnd-kit dibina berasaskan tiga konsep seni bina utama: DndContext mengurus semua keadaan seretan dan menyelaraskan elemen boleh diseret dengan elemen boleh menerima lepasan, penderia mengabstrakkan kaedah masukan supaya logik seretan yang sama berfungsi dengan tetikus, sentuhan, dan papan kekunci, manakala pengubah membolehkan anda menjajarkan, mengehadkan, atau mengubah pergerakan seretan.

dnd-kit disertakan dengan tiga penderia terbina dalam. PointerSensor mengendalikan masukan tetikus dan sentuhan melalui API Pointer Events yang disatukan. KeyboardSensor membolehkan seret dan lepas sepenuhnya menggunakan papan kekunci. TouchSensor mengendalikan peristiwa sentuhan legasi. Anda mengkonfigurasikan penderia melalui prop sensors pada DndContext.

dnd-kit mempunyai navigasi papan kekunci terbina dalam untuk kebolehcapaian. Pengguna menekan bar ruang untuk mengambil item, kekunci anak panah untuk mengalihkannya ke kedudukan baharu, bar ruang sekali lagi untuk melepaskannya, dan Escape untuk membatalkan seretan tanpa membuat perubahan. Interaksi ini diumumkan kepada pembaca skrin secara automatik.

dnd-kit menggunakan aria-grabbed secara automatik pada item boleh diseret untuk menunjukkan keadaannya kepada teknologi bantuan. Ia menggunakan aria-dropeffect pada zon boleh menerima lepasan untuk menyampaikan perkara yang akan berlaku apabila item dilepaskan. Kawasan langsung mengumumkan kemas kini status supaya pengguna pembaca skrin mendengar pengesahan seperti "Item diambil" atau "Item berjaya dilepaskan."

dnd-kit direka supaya bahagian yang tidak digunakan boleh dihapuskan semasa proses tree shaking, bermakna anda hanya mengimport bahagian yang benar-benar digunakan. Tiada CSS yang disertakan — semua penggayaan visual menjadi tanggungjawab anda, memberikan kawalan penuh terhadap penampilan elemen boleh diseret, lapisan tindanan, dan zon lepasan. Ini memastikan saiz pakej kekal minimum.

DndContext menyediakan tiga panggilan balik peristiwa utama untuk menjejaki kitar hayat seretan. onDragStart dicetuskan apabila pengguna mula menyeret dan menerima ID item aktif. onDragOver dicetuskan secara berterusan apabila item yang diseret bergerak di atas sasaran boleh menerima lepasan. onDragEnd dicetuskan apabila seretan selesai, lalu memberikan item aktif dan sasaran lepasan.

Anda menghantar tatasusunan konfigurasi penderia kepada DndContext menggunakan prop sensors yang digabungkan dengan cangkuk useSensors. Setiap penderia dimulakan dengan useSensor(SensorClass, options). Sebagai contoh, anda boleh mengkonfigurasikan PointerSensor dengan jarak seretan minimum untuk mengelakkan seretan tidak sengaja semasa mengklik.

Pengubah mengubah koordinat seretan sebelum koordinat tersebut digunakan pada elemen yang diseret. restrictToVerticalAxis mengunci pergerakan pada satu arah. restrictToParentElement memastikan item yang diseret kekal dalam bekasnya. snapCenterToCursor menjajarkan elemen supaya pusatnya mengikuti kursor. Anda menggabungkan beberapa pengubah dalam tatasusunan.

Setiap elemen boleh diseret dan boleh menerima lepasan memerlukan ID rentetan atau nombor yang unik. ID ini ialah cara utama dnd-kit menjejaki perkara yang sedang diseret dan tempat ia dilepaskan. Dalam onDragEnd, anda membaca event.active.id untuk item yang diseret dan event.over?.id untuk sasaran lepasan bagi mengemas kini keadaan aplikasi anda.

Tidak seperti banyak pustaka DnD yang menganggap sokongan papan kekunci sebagai perkara sampingan, dnd-kit meletakkan kebolehcapaian sebagai teras reka bentuknya. KeyboardSensor ialah komponen utama dengan keupayaan yang sama seperti PointerSensor. Semua atribut ARIA diurus secara automatik, dan pengumuman tersuai boleh dikonfigurasikan melalui prop accessibility pada DndContext.

dnd-kit menggantikan react-beautiful-dnd yang telah diarkibkan sebagai piawaian komuniti untuk seret dan lepas React. Seni binanya berpusat pada DndContext untuk keadaan, penderia untuk abstraksi masukan (Pointer, Keyboard, Touch), dan pengubah untuk kekangan pergerakan. Kebolehcapaian diberi keutamaan: atribut ARIA, pengumuman kawasan langsung, dan navigasi papan kekunci sepenuhnya terbina dalam.