Overlay Seret Kustom dan DnD Banyak Kontainer

DragOverlay merender kontennya sebagai portal React, dengan menambahkannya langsung ke document.body, bukan di dalam pohon DOM DndContext. Dengan demikian, konten tersebut tidak pernah terpotong oleh kontainer overflow:hidden atau overflow:scroll, dan selalu tampil di atas semua elemen lain tanpa memerlukan pengelolaan z-index secara manual.

Karena DragOverlay terpisah dari elemen asli, komponen ini dapat memiliki gaya visual yang akan merusak tata letak jika diterapkan pada elemen asli. Anda dapat menambahkan bayangan jatuh, transformasi skala (membuatnya sedikit lebih besar daripada elemen asli), atau efek rotasi. Petunjuk visual ini menyampaikan kepada pengguna bahwa elemen tersebut sedang "diangkat" dan bergerak.

DragOverlay perlu mengetahui apa yang harus dirender. Lacak ID seretan aktif dalam status: tetapkan nilainya di onDragStart dengan event.active.id dan hapus di onDragEnd dengan null. Di dalam DragOverlay, gunakan ID tersebut untuk menemukan data elemen yang sesuai dan merender komponen pratinjau yang tepat.

Saat menggunakan DragOverlay, elemen asli yang dapat diseret harus menjadi pengganti sementara secara visual selama penyeretan. Jika menggunakan useSortable, terapkan opacity: 0 atau garis tepi putus-putus ketika isDragging bernilai benar. Ini menunjukkan "ruang" tempat elemen akan kembali jika penyeretan dibatalkan, serta celah yang ditinggalkannya saat berpindah ke posisi baru.

Seret dan lepas multi-kontainer berarti elemen dapat diseret di antara dua atau lebih daftar yang terpisah. Penyiapannya memerlukan satu DndContext yang membungkus semua kontainer, dengan setiap kontainer memiliki SortableContext sendiri. Semua ID elemen di seluruh kontainer harus unik secara global untuk mencegah benturan.

Untuk animasi lintas kontainer yang halus, perbarui status dalam onDragOver, bukan menunggu onDragEnd. Ketika elemen yang diseret berpindah ke kontainer baru, pindahkan elemen tersebut dari kontainer sumber ke kontainer target segera. Dengan begitu, pengguna memperoleh umpan balik visual secara waktu nyata tentang tempat elemen akan berada.

Saat menyeret elemen melintasi beberapa instans SortableContext, semua ID elemen harus unik di seluruh DndContext — bukan hanya di dalam setiap daftar. Jika dua kontainer menggunakan ID yang sama, dnd-kit tidak dapat menentukan elemen mana yang aktif. Gunakan UUID atau awali ID dengan nama kontainer untuk memastikan keunikan global.

useDraggable dan useSortable menerima opsi data: useSortable({ id, data: { containerId, type } }). Data ini tersedia dalam fungsi panggilan balik peristiwa seret sebagai event.active.data.current. Dalam skenario multi-kontainer, Anda dapat menyimpan ID kontainer sumber dalam data dan menggunakannya di onDragOver untuk mengetahui asal elemen.

Status multi-kontainer biasanya menggunakan objek yang diindeks berdasarkan ID kontainer, yang masing-masing berisi larik elemen. Dalam onDragOver, ketika elemen aktif berada di kontainer yang berbeda dari target yang ditunjuk, hapus elemen tersebut dari larik kontainer sumber dan sisipkan ke larik kontainer target pada posisi yang tepat.

KeyboardSensor berfungsi untuk seret dan lepas multi-kontainer. Pengguna menekan tombol panah untuk berpindah antar-elemen dalam sebuah kontainer, dan ketika mencapai tepi kontainer, mereka dapat melanjutkan perpindahan ke kontainer di sebelahnya. Algoritme collisionDetection pada SortableContext menentukan target pelepasan valid terdekat berdasarkan posisi.

DndContext menerima properti collisionDetection yang menentukan cara menghitung zona pelepasan tempat elemen yang diseret berada. closestCenter bawaan bekerja dengan baik untuk sebagian besar daftar. closestCorners lebih baik untuk kisi. pointerWithin hanya mengaktifkan zona pelepasan ketika kursor secara fisik berada di dalamnya.

Di mana DragOverlay merender kontennya di dalam DOM?

DragOverlay merender sebagai portal ke document.body, sehingga tidak terpengaruh oleh kendala tata letak. Lacak activeDragId di onDragStart/onDragEnd untuk merender konten pratinjau yang tepat. Seret dan lepas multi-kontainer menggunakan beberapa instans SortableContext di dalam satu DndContext dengan ID yang unik secara global. Perbarui status di onDragOver untuk animasi lintas kontainer yang halus, dengan menggunakan event.active.data.current sebagai metadata kontainer sumber.