<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>
Spread the love

Leave a comment