Новый порядок в методе в Livewire

Давайте посмотрим, что происходит после сдвига. Строка на миг стоит на новом месте, а после ответа сервера прыгает назад: браузер нарисовал перестановку, а массив в PHP остался прежним.

Метод, который вызывает wire:sort, получает id строки и номер новой позиции, а не весь список id. Давайте вынем элемент из массива через unset, соберём порядок ключей через array_values и вставим id на место через array_splice.

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

php artisan make:livewire PostShift --class

Давайте опишем метод перестановки:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostShift 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-shift');
		}
	}
?>

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

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

Давайте добавим маршрут и страницу:

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

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

Создайте компонент EmployeeShift. После перетаскивания имена работников остаются в новом порядке и после ответа сервера.