<script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-sortable.js"></script>
For drag and drop of a row
In your component
public function sortColumn($list)
{
dd($list)
// update your db now
}
// OUTPUT
array:25 [▼
0 => array:2 [▼
"order" => 1
"value" => "166"
]
1 => array:2 [▶]
2 => array:2 [▶]
3 => array:2 [▶]
4 => array:2 [▶]
5 => array:2 [▶]
6 => array:2 [▶]
7 => array:2 [▶]
8 => array:2 [▶]
9 => array:2 [▶]
10 => array:2 [▶]
11 => array:2 [▶]
12 => array:2 [▶]
13 => array:2 [▶]
14 => array:2 [▶]
15 => array:2 [▶]
16 => array:2 [▶]
17 => array:2 [▶]
18 => array:2 [▶]
19 => array:2 [▶]
20 => array:2 [▶]
21 => array:2 [▶]
22 => array:2 [▶]
23 => array:2 [▶]
24 => array:2 [▼
"order" => 25
"value" => "143"
]
]
In your blade
<tbody wire:sortable="sortColumn">
<tr wire:sortable.item="{{ $id }}" wire:key="item-{{ $id }}">
<td>
</td>
</tr>
</tbody>