DndContext, useDraggable, dan useDroppable

Setiap fitur seret dan lepas dalam dnd-kit harus dibungkus dalam komponen DndContext. DndContext adalah pusat koordinasi — komponen ini melacak seretan aktif, berkomunikasi antara elemen yang dapat diseret dan target pelepasan, serta memanggil callback peristiwa. Biasanya Anda menempatkannya pada tingkat komponen yang mengelola status seret.

Hook useDraggable({ id }) membuat komponen dapat diseret. Hook ini mengembalikan empat nilai utama: atribut (prop ARIA yang diterapkan pada elemen), pendengar (pengendali peristiwa untuk memulai seretan), setNodeRef (memasang ref elemen yang dapat diseret), dan transformasi (translasi saat ini sebagai {x, y, scaleX, scaleY}).

Untuk menghubungkan elemen yang dapat diseret, terapkan attributes dan listeners pada elemen, lalu teruskan setNodeRef sebagai prop ref. Atribut tersebut mencakup role="button", tabIndex, dan properti aria. Pendengar memasang pengendali peristiwa penunjuk dan papan ketik yang diperlukan dnd-kit untuk mendeteksi awal seretan.

Nilai transform dari useDraggable adalah null saat tidak sedang menyeret dan berupa objek koordinat saat sedang menyeret. Anda mengonversinya menjadi string CSS menggunakan CSS.Translate.toString(transform) dari paket @dnd-kit/utilities. Terapkan nilai ini sebagai properti CSS transform pada elemen yang dapat diseret agar elemen tersebut mengikuti kursor secara visual.

Hook useDroppable({ id }) menandai sebuah wadah sebagai target pelepasan yang valid. Hook ini mengembalikan isOver (nilai boolean yang true saat elemen yang dapat diseret berada di atas target pelepasan ini) dan setNodeRef untuk memasang ref pada elemen target pelepasan. Berbeda dari useDraggable, hook ini tidak memiliki pendengar peristiwa yang perlu diterapkan.

Nilai isOver dari useDroppable memungkinkan Anda memberikan umpan balik visual selama seretan. Saat isOver bernilai true, Anda dapat menerapkan warna sorotan, batas, atau perubahan latar belakang pada zona target pelepasan. Hal ini membantu pengguna memahami tempat mereka dapat melepaskan item, yang sangat penting bagi kemudahan penggunaan dan aksesibilitas.

Callback onDragEnd pada DndContext menerima objek peristiwa dengan dua properti penting: event.active berisi item yang diseret, termasuk id-nya, dan event.over berisi target pelepasan, atau null jika item dilepaskan di luar target pelepasan mana pun. Gunakan ID ini untuk memperbarui status aplikasi.

Dalam onDragEnd, setelah memastikan bahwa event.over tidak bernilai null, Anda memperbarui status agar mencerminkan perpindahan tersebut. Misalnya, jika Anda memindahkan kartu antar-kolom dalam papan Kanban, Anda menghapus kartu dari kolom sumber dan menambahkannya ke kolom target yang diidentifikasi oleh event.over.id.

DragOverlay merender pratinjau mengambang dari elemen yang diseret dan mengikuti kursor. Komponen ini dirender sebagai portal (di luar pohon DOM normal) sehingga tidak pernah terpotong oleh kontainer overflow:hidden. Berbeda dari elemen asli, overlay dapat memiliki bayangan jatuh, transformasi skala, atau rotasi untuk menunjukkan bahwa elemen tersebut sedang diseret.

Untuk merender konten yang tepat di DragOverlay, lacak elemen yang sedang diseret menggunakan fungsi panggilan balik onDragStart. Simpan ID aktif dalam status: setActiveDragId(event.active.id). Dalam onDragEnd, atur ulang nilainya menjadi null. Di dalam DragOverlay, gunakan activeDragId untuk mencari elemen yang tepat dan merendernya.

Antarmuka pengguna seret dan lepas yang nyata menggabungkan DndContext, beberapa elemen useDraggable, beberapa zona useDroppable, dan pengelolaan status untuk melacak posisi setiap elemen. Inti pentingnya adalah dnd-kit menyediakan mekanismenya — tugas Anda adalah memperbarui status dalam onDragEnd dan merender ulang antarmuka pengguna agar mencerminkan susunan baru.

Utilitas mana yang mengonversi objek transform dari useDraggable menjadi string transformasi CSS?

DndContext adalah pusat koordinasi untuk semua operasi seret dnd-kit. useDraggable menyediakan atribut, pendengar, setNodeRef, dan transformasi untuk elemen yang dapat diseret. useDroppable menyediakan isOver dan setNodeRef untuk target pelepasan. onDragEnd memberi Anda event.active.id dan event.over?.id untuk memperbarui status. DragOverlay merender pratinjau mengambang berbasis portal.