Sürükle-bırak
Öğeleri sürükleyip bırakarak sıralamayı sağlar. Livewire 4 ile gelen Alpine Sort eklentisini kullanır; handler verilirse yeni sıra sunucuya gönderilir.
Temel kullanım
Her satır bir acun:sortable.item'dır ve benzersiz bir key ister. Satır, üzerinde herhangi bir yerden tutularak sürüklenir. handler verilmezse yeni sıra yalnızca tarayıcıda kalır; sayfa yenilenince eski sıra döner.
<acun:sortable>
<acun:sortable.item key="1">Elektronik</acun:sortable.item>
<acun:sortable.item key="2">Ev ve yaşam</acun:sortable.item>
<acun:sortable.item key="3">Giyim</acun:sortable.item>
<acun:sortable.item key="4">Kozmetik</acun:sortable.item>
</acun:sortable>| Prop | Değerler |
|---|---|
key | Öğenin kimliği, ör. kayıt id |
Tutamaçtan sürükleme
handle verildiğinde sürükleme yalnızca soldaki tutamaç ikonundan başlar ve imleç yalnızca orada değişir. Satırda düğme ya da bağlantı varsa bunları kullanırken satırın yanlışlıkla kaymasını önler. İçeriği satır boyunca yaymak için slot'a esnek bir kapsayıcı verin.
<acun:sortable handle>
<acun:sortable.item key="1"><span class="flex items-center justify-between gap-3">Elektronik <acun:button size="sm" variant="ghost">Düzenle</acun:button></span></acun:sortable.item>
<acun:sortable.item key="2"><span class="flex items-center justify-between gap-3">Ev ve yaşam <acun:button size="sm" variant="ghost">Düzenle</acun:button></span></acun:sortable.item>
<acun:sortable.item key="3"><span class="flex items-center justify-between gap-3">Giyim <acun:button size="sm" variant="ghost">Düzenle</acun:button></span></acun:sortable.item>
</acun:sortable>| Prop | Değerler |
|---|---|
handle | true | false |
Livewire ile kaydetme
handler bir Livewire metodunun adıdır; bırakılan öğenin key değeri ve 0'dan başlayan yeni sırası bu metoda gönderilir. Döngülerde wire:key vermeyi unutmayın.
<acun:sortable handler="siraGuncelle">
@foreach ($kategoriler as $kategori)
<acun:sortable.item :key="$kategori->id" wire:key="kategori-{{ $kategori->id }}">{{ $kategori->ad }}</acun:sortable.item>
@endforeach
</acun:sortable>| Prop | Değerler |
|---|---|
handler | Livewire metot adı |
Sunucu metodu
Metot öğenin anahtarını ve yeni sırasını alır. Aradaki kayıtların da sırası kaydığı için listeyi baştan numaralandırmak en güvenli yoldur.
public function siraGuncelle(int $kategoriId, int $yeniSira): void
{
$siralama = Kategori::orderBy('sira')->pluck('id')
->reject(fn (int $id) => $id === $kategoriId)
->values();
$siralama->splice($yeniSira, 0, [$kategoriId]);
foreach ($siralama as $sira => $id) {
Kategori::whereKey($id)->update(['sira' => $sira]);
}
}Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
handler | null | Livewire metodu; (anahtar, yeni sıra) ile çağrılır |
handle | false | true: yalnızca tutamaç ikonundan sürüklenir; false: satırın tamamından |
sortable.item: key | — | Zorunlu; öğenin kimliği |