Исключение элемента в Livewire

Давайте рассмотрим ситуацию, когда в списке есть строка, которую нельзя сдвинуть: важный заголовок должен всегда стоять первым, а остальные можно переставлять вокруг него.

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

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

php artisan make:livewire PostFixed --class

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

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

Давайте первый пункт пометим как закреплённый, остальные оставим обычными:

<div>
	<ul wire:sort="handleSort">
		@foreach ($titles as $id => $title)
			<li
				wire:key="{{ $id }}"
				wire:sort:item="{{ $id }}"
				@if ($loop->first)
					wire:sort:ignore
				@endif
			>
				@if ($loop->first)
					Pinned
				@endif
				{{ $title }}
			</li>
		@endforeach
	</ul>
</div>

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

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

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

Создайте компонент EmployeeFixed. Одна строка работника стоит на месте, остальные перетаскиваются.