السحب والإفلات القابل للترتيب في Livewire

npm install sortablejs

public $items = [];

public function updateOrder($orderedIds)
{
    foreach ($orderedIds as $index => $id) {
        Item::find($id)->update(['order' => $index]);
    }
}

<div x-data x-init="
    Sortable.create($el, {
        onEnd: (e) => $wire.updateOrder(
            Array.from($el.children).map(el => el.dataset.id)
        )
    })
">
    @foreach($items as $item)
        <div data-id="{{ $item->id }}">{{ $item->name }}</div>
    @endforeach
</div>