SortableContext untuk Daftar yang Dapat Diurutkan Ulang

SortableContext adalah komponen dnd-kit khusus yang membungkus daftar yang dapat diurutkan ulang. Jika useDraggable dan useDroppable menangani operasi seret dan lepas umum, SortableContext secara khusus menangani situasi ketika elemen dalam daftar perlu diurutkan ulang dengan menyeretnya ke posisi baru.

SortableContext memerlukan properti items: larik ID unik berupa teks atau angka yang sesuai dengan ID yang digunakan dalam komponen yang dapat diurutkan di dalamnya. Urutan larik ini menentukan urutan elemen saat ini. Ketika Anda memperbarui larik ini dalam status, daftar akan dirender ulang dalam urutan baru.

SortableContext menerima properti strategy yang mengatur cara elemen diurutkan. verticalListSortingStrategy digunakan untuk daftar vertikal dan menghitung titik penyisipan berdasarkan posisi vertikal. horizontalListSortingStrategy digunakan untuk daftar horizontal. rectSortingStrategy digunakan untuk kisi. Pilih strategi yang sesuai dengan tata letak Anda.

Di dalam SortableContext, setiap elemen daftar menggunakan kait useSortable({ id }), bukan useDraggable. useSortable mencakup semua kemampuan useDraggable — kait ini mengembalikan atribut, pendengar, setNodeRef, dan transformasi yang sama, serta nilai tambahan khusus pengurutan seperti isDragging dan overIndex.

Nilai isDragging dari useSortable bernilai benar selama elemen sedang aktif diseret. Biasanya, Anda menggunakan nilai ini untuk mengurangi opasitas atau menambahkan gaya pengganti sementara pada elemen asli dalam daftar saat elemen tersebut diseret. Celah visual ini menunjukkan kepada pengguna posisi elemen saat ini dalam daftar.

dnd-kit mengekspor utilitas arrayMove(array, fromIndex, toIndex) dari @dnd-kit/sortable. Utilitas ini mengembalikan larik baru dengan elemen pada fromIndex dipindahkan ke toIndex. Ini adalah cara standar untuk memperbarui larik status ketika penyeretan untuk pengurutan selesai.

Dalam fungsi panggilan balik onDragEnd pada DndContext untuk daftar yang dapat diurutkan, Anda mencari indeks lama dan baru menggunakan items.indexOf(event.active.id) dan items.indexOf(event.over?.id). Jika kedua indeks valid dan berbeda, Anda memanggil setItems(arrayMove(items, oldIndex, newIndex)) untuk mengurutkan ulang larik.

Saat sebuah elemen diseret, elemen lain dalam daftar bergerak dengan animasi ke posisi baru untuk menunjukkan tempat elemen yang diseret akan berada. useSortable menyediakan transformasi CSS untuk setiap elemen yang tidak diseret, yang menggesernya agar tidak menghalangi. Menambahkan transisi CSS pada transformasi ini menghasilkan animasi pergerakan yang halus.

Terapkan transisi CSS pada properti transformasi elemen yang dapat diurutkan: transition: isDragging ? undefined : transform ? 'transform 200ms ease' : undefined. Saat sebuah elemen sedang diseret, transisi tidak diperlukan karena elemen tersebut harus mengikuti kursor secara langsung. Saat tergeser, transisi menghasilkan animasi pergeseran yang halus.

Untuk pengalaman pengguna terbaik, gabungkan SortableContext dengan DragOverlay. Elemen yang diseret dalam daftar menjadi pengganti sementara semi-transparan (menggunakan isDragging), sementara DragOverlay merender salinan utuh yang tampak terangkat dan mengikuti kursor. Pendekatan ini menghindari gangguan visual ketika elemen yang diseret berpindah-pindah posisi.

SortableContext bekerja sama baiknya untuk daftar vertikal (papan tugas, daftar pekerjaan) maupun daftar horizontal (bilah tab, karusel gambar). Beralihlah antarstrategi dengan mengubah properti strategy. Anda bahkan dapat menggunakannya untuk tata letak kisi dengan rectSortingStrategy, yang menghitung sel kisi terdekat berdasarkan posisi penyeretan.

Argumen apa yang diterima arrayMove ketika dipanggil di dalam onDragEnd untuk mengurutkan ulang daftar yang dapat diurutkan?

SortableContext membungkus daftar yang dapat diurutkan ulang dan memerlukan larik elemen berisi ID unik serta strategi (vertikal, horizontal, atau kisi). Setiap elemen menggunakan useSortable, bukan useDraggable, sehingga memperoleh isDragging dan overIndex. Dalam onDragEnd, arrayMove(items, oldIndex, newIndex) mengurutkan ulang larik. Transisi CSS pada transformasi menganimasikan elemen yang tergeser dengan halus.