Элемент списка в Livewire

Давайте теперь возьмём список заголовков. Строку сдвинули мышью, а сервер не знает, какую именно: до него доходит только новое место, без имени строки.

Атрибут элемента wire:sort:item вешают на каждый li и передают стабильный id из массива. Тогда обработчик узнает и строку, и позицию, куда её поставили.

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

php artisan make:livewire PostItem --class

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

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostItem extends Component
	{
		public $titles = [
			1 => 'News',
			2 => 'Note',
			3 => 'Draft',
		];
		
		public $note = '';
		
		public function handleSort($id, $position)
		{
			$this->note = $id . ' at ' . $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-item');
		}
	}
?>

Давайте выведем список с wire:sort и подпись под ним:

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

Давайте откроем страницу по адресу /posts/item:

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

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

Создайте компонент EmployeeItem. После перетаскивания на странице видно, какого работника сдвинули и на какое место.