DndContext, useDraggable dan useDroppable

Setiap ciri seret dan lepas dalam dnd-kit mesti dibungkus dalam komponen DndContext. DndContext ialah hab penyelarasan — ia menjejaki seretan aktif, berkomunikasi antara elemen boleh diseret dan elemen boleh menerima lepasan, serta mencetuskan panggilan balik peristiwa. Biasanya, anda meletakkannya pada peringkat komponen yang mengurus keadaan seretan.

Cangkuk useDraggable({ id }) menjadikan sesuatu komponen boleh diseret. Ia mengembalikan empat nilai utama: atribut (prop ARIA untuk dihamparkan pada elemen), pendengar (pengendali peristiwa untuk memulakan seretan), setNodeRef (melampirkan rujukan elemen boleh diseret), dan transformasi (terjemahan semasa sebagai {x, y, scaleX, scaleY}).

Untuk menyediakan elemen boleh diseret, hamparkan attributes dan listeners pada elemen tersebut, kemudian hantarkan setNodeRef sebagai prop ref. Atribut itu merangkumi role="button", tabIndex, dan sifat aria. Pendengar itu melampirkan pengendali peristiwa tetikus dan papan kekunci yang diperlukan oleh dnd-kit untuk mengesan permulaan seretan.

Nilai transform daripada useDraggable ialah null apabila tidak menyeret dan menjadi objek koordinat apabila menyeret. Anda menukarkannya kepada rentetan CSS menggunakan CSS.Translate.toString(transform) daripada pakej @dnd-kit/utilities. Gunakannya sebagai sifat CSS transform pada elemen boleh diseret supaya elemen itu mengikuti kursor secara visual.

Cangkuk useDroppable({ id }) menandakan bekas sebagai sasaran lepasan yang sah. Ia mengembalikan isOver (nilai benar semasa elemen boleh diseret berada di atas elemen boleh menerima lepasan ini) dan setNodeRef untuk melampirkan rujukan pada elemen boleh menerima lepasan. Berbeza dengan useDraggable, tiada pendengar peristiwa untuk dihamparkan.

Nilai isOver daripada useDroppable membolehkan anda memberikan maklum balas visual semasa seretan. Apabila isOver bernilai benar, anda boleh menggunakan warna sorotan, sempadan, atau perubahan latar belakang pada zon lepasan. Ini membantu pengguna memahami tempat mereka boleh melepaskan item, yang penting untuk kebolehgunaan dan kebolehcapaian.

Panggilan balik onDragEnd pada DndContext menerima objek peristiwa dengan dua sifat penting: event.active mengandungi item yang diseret (termasuk id), manakala event.over mengandungi sasaran lepasan (atau null jika item dilepaskan di luar mana-mana elemen boleh menerima lepasan). Anda menggunakan ID ini untuk mengemas kini keadaan aplikasi.

Dalam onDragEnd, selepas memastikan bahawa event.over bukan nilai kosong, anda mengemas kini keadaan untuk mencerminkan pemindahan itu. Sebagai contoh, jika anda memindahkan kad antara lajur pada papan Kanban, anda mengalih keluar kad itu daripada lajur sumber dan menambahkannya ke lajur sasaran yang dikenal pasti melalui event.over.id.

DragOverlay memaparkan pratonton terapung bagi elemen yang diseret dan mengikut kursor. Ia dipaparkan sebagai portal (di luar pepohon DOM biasa) supaya tidak pernah terpotong oleh bekas yang menyembunyikan kandungan berlebihan. Tidak seperti elemen asal, tindanan ini boleh mempunyai bayang jatuh, transformasi skala atau putaran untuk menunjukkan bahawa elemen itu sedang diseret.

Untuk memaparkan kandungan yang betul dalam DragOverlay, jejak elemen yang sedang diseret menggunakan panggilan balik onDragStart. Simpan ID aktif dalam keadaan: setActiveDragId(event.active.id). Dalam onDragEnd, tetapkan semula kepada nilai kosong. Di dalam DragOverlay, gunakan activeDragId untuk mencari elemen yang betul dan memaparkannya.

Antara muka seret dan lepas sebenar menggabungkan DndContext, berbilang elemen useDraggable, berbilang zon useDroppable dan pengurusan keadaan untuk menjejaki lokasi setiap elemen. Inti pentingnya ialah dnd-kit menyediakan mekanismenya—anda bertanggungjawab mengemas kini keadaan dalam onDragEnd dan memaparkan semula antara muka pengguna untuk mencerminkan susunan baharu.

DndContext ialah hab penyelarasan untuk semua operasi seret dnd-kit. useDraggable menyediakan atribut, pendengar, setNodeRef dan nilai transformasi untuk elemen yang boleh diseret. useDroppable menyediakan isOver dan setNodeRef untuk sasaran pelepasan. onDragEnd memberikan event.active.id dan event.over?.id supaya anda boleh mengemas kini keadaan. DragOverlay memaparkan pratonton terapung berasaskan portal.