SortableContext untuk Senarai yang Boleh Disusun Semula

SortableContext ialah komponen dnd-kit khusus yang membungkus senarai yang boleh disusun semula. Walaupun useDraggable dan useDroppable mengendalikan seret dan lepas umum, SortableContext khusus mengendalikan keadaan apabila elemen dalam senarai perlu disusun semula dengan menyeretnya ke kedudukan baharu.

SortableContext memerlukan sifat items: tatasusunan ID rentetan atau nombor yang unik dan sepadan dengan ID yang digunakan dalam komponen boleh susun anak. Susunan tatasusunan ini menentukan susunan semasa elemen. Apabila anda mengemas kini tatasusunan ini dalam keadaan, senarai dipaparkan semula dalam susunan baharu.

SortableContext menerima sifat strategy yang mengawal cara elemen disusun. verticalListSortingStrategy adalah untuk senarai menegak dan mengira titik penyisipan berdasarkan kedudukan menegak. horizontalListSortingStrategy adalah untuk senarai mendatar. rectSortingStrategy adalah untuk susun atur berpetak. Pilih strategi yang sepadan dengan susun atur anda.

Di dalam SortableContext, setiap elemen senarai menggunakan cangkuk useSortable({ id }) dan bukannya useDraggable. useSortable ialah set lanjutan useDraggable—ia mengembalikan atribut, pendengar, setNodeRef dan transformasi yang sama, serta nilai tambahan khusus untuk penyusunan seperti isDragging dan overIndex.

Nilai isDragging daripada useSortable adalah benar semasa elemen sedang diseret secara aktif. Biasanya anda menggunakan nilai ini untuk mengurangkan kelegapan atau menambahkan gaya ruang letak pada elemen asal dalam senarai semasa ia diseret. Jurang visual ini menunjukkan kepada pengguna lokasi semasa elemen dalam senarai.

dnd-kit mengeksport utiliti arrayMove(array, fromIndex, toIndex) daripada @dnd-kit/sortable. Utiliti ini mengembalikan tatasusunan baharu dengan elemen pada fromIndex dipindahkan ke toIndex. Ini ialah cara piawai untuk mengemas kini tatasusunan keadaan apabila seretan penyusunan selesai.

Dalam panggilan balik onDragEnd DndContext untuk senarai boleh susun, anda mencari indeks lama dan baharu menggunakan items.indexOf(event.active.id) dan items.indexOf(event.over?.id). Jika kedua-dua indeks sah dan berbeza, anda memanggil setItems(arrayMove(items, oldIndex, newIndex)) untuk menyusun semula tatasusunan.

Apabila satu elemen diseret, elemen lain dalam senarai bergerak secara beranimasi ke kedudukan baharu untuk menunjukkan tempat elemen yang diseret akan diletakkan. useSortable menyediakan transformasi CSS untuk setiap elemen yang tidak diseret supaya elemen itu beralih keluar dari laluan. Menambahkan peralihan CSS pada transformasi ini menghasilkan animasi pergerakan yang lancar.

Gunakan peralihan CSS pada sifat transformasi elemen boleh susun: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. Apabila elemen sedang diseret, tiada peralihan diperlukan kerana elemen itu perlu mengikuti kursor secara langsung. Apabila dialihkan, peralihan menghasilkan animasi gelongsoran yang lancar.

Untuk pengalaman pengguna yang terbaik, gabungkan SortableContext dengan DragOverlay. Elemen yang diseret dalam senarai menjadi ruang letak separa lutsinar menggunakan isDragging, manakala DragOverlay memaparkan salinan legap yang ditinggikan dan mengikuti kursor. Pendekatan ini mengelakkan gangguan visual apabila elemen yang diseret melompat antara kedudukan.

SortableContext berfungsi sama baik untuk senarai menegak (papan tugasan, senarai tugasan) dan senarai mendatar (bar navigasi tab, karusel imej). Tukar antara strategi dengan mengubah sifat strategy. Anda juga boleh menggunakannya untuk susun atur berpetak dengan rectSortingStrategy, yang mengira sel petak terdekat berdasarkan kedudukan seretan.

SortableContext membungkus senarai yang boleh disusun semula dan memerlukan tatasusunan elemen dengan ID unik serta strategi (menegak, mendatar atau berpetak). Setiap elemen menggunakan useSortable dan bukannya useDraggable, lalu memperoleh isDragging dan overIndex. Dalam onDragEnd, arrayMove(items, oldIndex, newIndex) menyusun semula tatasusunan. Peralihan CSS pada transformasi menganimasikan elemen yang dialihkan dengan lancar.