Ручка перетаскивания в Livewire

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

Атрибут ручки wire:sort:handle вешают на отдельный элемент внутри пункта. Перетаскивание начнётся только если потянуть именно за эту область.

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

php artisan make:livewire PostGrip --class

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

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

Давайте внутри пункта выведем ручку и заголовок рядом:

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

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

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

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

Создайте компонент EmployeeGrip. Строку работника можно сдвинуть только за отдельный значок.