Перетаскивание списка в Livewire

Пусть на странице три заголовка поста стоят столбиком, а переставить их мышью нельзя: порядок задаёт массив в PHP, и без запроса к серверу строки не сдвигаются.

Атрибут wire:sort вешают на список и указывают метод, который Livewire вызовет после перетаскивания. Так браузер показывает движение, а сервер может запомнить порядок.

Страница откроется по адресу /posts/order. Давайте создадим компонент PostOrder:

php artisan make:livewire PostOrder --class

Давайте заведём массив заголовков в свойстве:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostOrder extends Component
	{
		public $titles = [
			1 => 'News',
			2 => 'Note',
			3 => 'Draft',
		];
		
		public function handleSort($id, $position)
		{
			$title = $this->titles[$id];
			unset($this->titles[$id]);
			$order = array_values(
				array_keys($this->titles)
			);
			array_splice(
				$order,
				$position,
				0,
				[$id]
			);
			$sorted = [];
			foreach ($order as $key) {
				$sorted[$key] = ($key === $id)
					? $title
					: $this->titles[$key];
			}
			$this->titles = $sorted;
		}
		
		public function render()
		{
			return view('livewire.post-order');
		}
	}
?>

Давайте выведем список с wire:sort, а у каждого пункта отметим элемент и ключ для Livewire:

<div>
	<ul wire:sort="handleSort">
		@foreach ($titles as $id => $title)
			<li
				wire:key="{{ $id }}"
				wire:sort:item="{{ $id }}"
			>
				{{ $title }}
			</li>
		@endforeach
	</ul>
</div>

Без wire:sort:item и wire:key перетаскивание на экране может не сработать: фреймворк не поймёт, какая строка куда переехала. Давайте добавим маршрут и страницу:

<?php
	Route::get('/posts/order', function () {
		return view('posts-order');
	});
?>

<x-layout>
	<livewire:post-order />
</x-layout>

Создайте компонент EmployeeOrder. Строки имён работников можно переставить мышью, и новый порядок остаётся.