بناء قائمة سحب وإفلات مع Livewire v4

@php
new class extends Livewire\Component {
    public array $items = [];
    
    public function updateOrder(array $order): void
    {
        foreach ($order as $position => $id) {
            Item::find($id)->update(['position' => $position]);
        }
    }
}
@endphp

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