dnd kit

• Fitur yang dikemas: algoritme deteksi tabrakan yang dapat disesuaikan, banyak aktivator, hamparan yang dapat diseret, pegangan seret, pengguliran otomatis, batasan, dan banyak lagi.
• Dibuat untuk React: mengekspos hook seperti useDraggable dan useDroppable . dan tidak akan memaksa Anda untuk merancang ulang aplikasi atau membuat simpul DOM pembungkus tambahan.
• Mendukung berbagai kasus penggunaan: daftar, kisi, beberapa wadah, konteks bersarang, item berukuran variabel, daftar tervirtualisasi, Game 2D, dan banyak lagi.
• Tanpa ketergantungan dan modular: inti perpustakaan berbobot sekitar 10kb yang diperkecil dan tidak memiliki ketergantungan eksternal. Itu dibangun berdasarkan manajemen dan konteks status React bawaan, yang membuat perpustakaan tetap ramping.
• Dukungan bawaan untuk berbagai metode masukan: Sensor penunjuk, mouse, sentuh, dan keyboard.
• Sepenuhnya dapat disesuaikan & diperluas: Sesuaikan setiap detail: animasi, transisi, perilaku, gaya. Bangun sensor Anda sendiri, algoritme deteksi tabrakan, sesuaikan pengikatan kunci, dan banyak lagi.
• Aksesibilitas: Dukungan keyboard, atribut aria default yang masuk akal, instruksi pembaca layar yang dapat disesuaikan, dan wilayah langsung yang ada di dalamnya.
• Performa: Dibuat dengan mempertimbangkan performa untuk mendukung animasi sehalus sutra.
• Preset: Perlu membuat antarmuka yang dapat diurutkan? Lihat @dnd-kit/sortable , yang merupakan lapisan tipis yang dibuat di atas @dnd-kit/core . Lebih banyak preset akan hadir di masa mendatang.

Dokumentasi

Untuk mempelajari cara memulai dnd kit , kunjungi situs web dokumentasi resmi. Anda akan menemukan dokumentasi API yang mendalam, tips dan panduan untuk membantu Anda membangun antarmuka drag and drop.

Konsep-konsep kunci

Pustaka inti kit dnd memaparkan dua konsep utama:

• Elemen yang dapat diseret
• Area yang dapat dijatuhkan

Tingkatkan komponen yang ada menggunakan hook useDraggable dan useDroppable , atau gabungkan keduanya untuk membuat komponen yang dapat diseret dan dijatuhkan.

Tangani peristiwa dan sesuaikan perilaku elemen yang dapat diseret dan area yang dapat dilepas menggunakan penyedia <DndContext> . Konfigurasikan sensor untuk menangani metode masukan yang berbeda.

Gunakan komponen <DragOverlay> untuk merender overlay yang dapat diseret yang dihapus dari alur dokumen normal dan diposisikan relatif terhadap area pandang.

Lihat panduan memulai cepat kami untuk mempelajari cara memulai.

Kemungkinan diperpanjang

Ekstensibilitas adalah inti dari kit dnd . Itu dibangun agar ramping dan dapat diperluas. Ini dilengkapi dengan fitur-fitur yang kami yakini akan diinginkan sebagian besar orang sepanjang waktu, dan memberikan poin tambahan untuk membangun fitur lainnya di atas @dnd-kit/core .

Contoh utama tingkat ekstensibilitas dnd kit adalah preset Sortable, yang dibuat menggunakan titik ekstensi yang diekspos oleh @dnd-kit/core .

Poin ekstensi utama dari kit dnd adalah:

• Sensor
• Pengubah
• Kendala
• Algoritme deteksi tabrakan khusus

Aksesibilitas

Membangun antarmuka seret dan lepas yang dapat diakses itu sulit; dnd kit memiliki sejumlah default dan titik awal yang masuk akal untuk membantu Anda membuat antarmuka seret dan lepas dapat diakses:

• Petunjuk pembaca layar yang dapat disesuaikan tentang cara berinteraksi dengan item yang dapat diseret
• Pembaruan wilayah langsung yang dapat disesuaikan untuk memberikan pengumuman pembaca layar secara real-time tentang apa yang sedang terjadi dengan elemen yang dapat diseret dan dijatuhkan.
• Default yang masuk akal untuk atribut aria yang harus diteruskan ke item yang dapat diseret

Lihat panduan Aksesibilitas kami untuk mempelajari lebih lanjut tentang bagaimana Anda dapat membantu memberikan pengalaman yang lebih baik bagi pembaca layar.

Arsitektur

Tidak seperti kebanyakan perpustakaan drag and drop, dnd kit sengaja tidak dibuat di atas API Drag and drop HTML5. Ini adalah keputusan arsitektur yang disengaja, yang memang disertai dengan pengorbanan yang harus Anda waspadai sebelum memutuskan untuk menggunakannya, namun untuk sebagian besar aplikasi, kami yakin manfaatnya lebih besar daripada pengorbanannya.

API Seret dan lepas HTML5 memiliki beberapa keterbatasan yang parah. Ini tidak mendukung perangkat sentuh atau menggunakan keyboard untuk menyeret item, yang berarti bahwa perpustakaan yang dibangun di atasnya perlu menampilkan implementasi yang sama sekali berbeda untuk mendukung metode masukan tersebut. Ini juga tidak mendukung kasus penggunaan umum seperti mengunci penarikan ke sumbu tertentu atau ke batas wadah, strategi deteksi tabrakan khusus, atau bahkan menyesuaikan pratinjau item yang diseret.

Meskipun ada solusi untuk beberapa masalah ini, solusi tersebut biasanya meningkatkan kompleksitas basis kode dan ukuran paket pustaka secara keseluruhan, dan menyebabkan ketidakkonsistenan antara lapisan mouse, sentuhan, dan keyboard karena keduanya didukung oleh implementasi yang sepenuhnya berbeda.

Kerugian utama jika tidak menggunakan API Seret dan lepas HTML5 adalah Anda tidak akan dapat menarik dari desktop atau antar jendela. Jika kasus penggunaan seret dan lepas yang Anda pikirkan melibatkan fungsi semacam ini, Anda pasti ingin menggunakan perpustakaan yang dibangun di atas API Seret dan lepas HTML 5. Kami sangat menyarankan Anda memeriksa react-dnd untuk perpustakaan React yang memiliki backend Seret dan lepas HTML 5 asli.

Pertunjukan

Meminimalkan mutasi DOM

dnd kit memungkinkan Anda membuat antarmuka seret dan lepas tanpa harus mengubah DOM setiap kali item perlu berpindah posisi.

Hal ini dimungkinkan karena dnd kit dengan malas menghitung dan menyimpan posisi awal dan tata letak container yang dapat dijatuhkan saat operasi drag dimulai. Posisi ini diteruskan ke komponen Anda yang menggunakan useDraggable dan useDroppable sehingga Anda dapat menghitung posisi baru item Anda saat operasi tarik sedang berlangsung, dan memindahkannya ke posisi baru menggunakan properti CSS berkinerja yang tidak memicu pengecatan ulang seperti translate3d dan scale . Untuk contoh bagaimana hal ini dapat dicapai, lihat penerapan strategi pengurutan yang dipaparkan oleh perpustakaan @dnd-kit/sortable .

Ini bukan berarti Anda tidak dapat menggeser posisi item di DOM sambil menyeret, ini adalah sesuatu yang didukung dan terkadang tidak dapat dihindari. Dalam beberapa kasus, tidak mungkin mengetahui sebelumnya posisi dan tata letak baru item tersebut sampai Anda memindahkannya di DOM. Ketahuilah bahwa mutasi pada DOM saat menyeret ini jauh lebih mahal dan akan menyebabkan pengecatan ulang, jadi jika memungkinkan, lebih suka menghitung posisi baru menggunakan translate3d dan scale .

Peristiwa sintetik

kit dnd juga menggunakan pemroses SyntheticEvent untuk peristiwa aktivator semua sensor, yang menghasilkan peningkatan kinerja dibandingkan menambahkan pemroses peristiwa secara manual ke setiap node yang dapat diseret.

Bekerja di repositori @dnd-kit

Paket yang terdapat dalam repositori ini

• @dnd-kit/core
• @dnd-kit/accessibility
• @dnd-kit/sortable
• @dnd-kit/modifiers
• @dnd-kit/utilities

Menginstal dependensi

Anda harus menginstal semua dependensi di direktori root. Karena @dnd-kit adalah monorepo yang menggunakan Ruang Kerja Lerna dan Yarn, npm CLI tidak didukung (hanya benang).

yarn install

Ini akan menginstal semua dependensi di setiap proyek, membangunnya, dan menghubungkannya melalui Lerna

Alur kerja pengembangan

Di satu terminal, jalankan yarn start secara paralel:

yarn start

Ini membangun setiap paket ke <packages>/<package>/dist dan menjalankan proyek dalam mode tontonan sehingga setiap pengeditan yang Anda simpan di dalam <packages>/<package>/src menyebabkan pembangunan kembali ke <packages>/<package>/dist . Hasilnya akan dialirkan ke terminal.

Menjalankan buku cerita

yarn start:storybook

Menjalankan buku cerita Buka http://localhost:6006 untuk melihatnya di browser.

Bekerja dengan taman bermain

Anda dapat bermain dengan paket lokal di taman bermain bertenaga Parcel.

yarn start:playground

Ini akan memulai taman bermain di localhost:1234 . Jika Anda memiliki lerna yang menjalankan jam tangan dalam mode paralel di satu terminal, dan kemudian Anda menjalankan parsel, taman bermain Anda akan memuat ulang secara panas ketika Anda membuat perubahan pada modul yang diimpor yang sumbernya ada di dalam packages/*/src/* . Perhatikan bahwa untuk mencapai hal ini, perintah start setiap paket meneruskan tanda --noClean ke TDSX. Hal ini mencegah Parcel meledak di antara pembangunan kembali karena kesalahan File Tidak Ditemukan.

Tip Keamanan Penting: Saat menambahkan/mengubah paket di taman bermain, gunakan objek alias di package.json. Ini akan memberitahu Parcel untuk menyelesaikannya ke sistem file daripada mencoba menginstal paket dari NPM. Ini juga memperbaiki kesalahan duplikat React yang mungkin Anda temui.

Menjalankan Cemara

(Di terminal ketiga) Anda dapat menjalankan Cypress dan itu akan menjalankan tes integrasi terhadap buku cerita.