Директива wire:sort:ignore

Директива wire:sort:ignore применяется к HTML-элементу и сообщает Livewire, что данный элемент должен быть исключен из системы сортировки. Это означает, что такой элемент нельзя перемещать методом перетаскивания, и он не будет участвовать в сортировке. Директива не принимает никаких значений, достаточно просто ее наличия на элементе.

Синтаксис

<div wire:sortable="updateOrder">
	<div wire:sort:ignore>
		Этот элемент не участвует в сортировке
	</div>
	<div wire:sort:item="{{ $item->id }}">
		Сортируемый элемент 1
	</div>
	<div wire:sort:item="{{ $item->id }}">
		Сортируемый элемент 2
	</div>
</div>

Пример

Давайте создадим список задач, где последняя задача «Завершенные» будет исключена из сортировки:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TaskList extends Component
	{
		public $tasks = [
			['id' => 1, 'name' => 'Задача 1', 'status' => 'active'],
			['id' => 2, 'name' => 'Задача 2', 'status' => 'active'],
			['id' => 3, 'name' => 'Задача 3', 'status' => 'active'],
			['id' => 4, 'name' => 'Завершенные', 'status' => 'completed'],
		];
		
		public function updateOrder($orderedIds)
		{
			$orderedTasks = [];
			
			foreach ($orderedIds as $id) {
				foreach ($this->tasks as $task) {
					if ($task['id'] == $id) {
						$orderedTasks[] = $task;
						break;
					}
				}
			}
			
			$this->tasks = $orderedTasks;
		}
		
		public function render()
		{
			return view('livewire.task-list');
		}
	}
?>

<div wire:sortable="updateOrder">
	@foreach ($tasks as $task)
		@if ($task['status'] == 'completed')
			<div wire:sort:ignore style="background: #f0f0f0; padding: 10px;">
				{{ $task['name'] }}
			</div>
		@else
			<div wire:sort:item="{{ $task['id'] }}" style="padding: 10px; background: #e0f0ff; margin: 5px 0;">
				{{ $task['name'] }}
			</div>
		@endif
	@endforeach
</div>

Результат выполнения кода:

<div>
	<div style="background: #e0f0ff; padding: 10px; margin: 5px 0;">
		Задача 1
	</div>
	<div style="background: #e0f0ff; padding: 10px; margin: 5px 0;">
		Задача 2
	</div>
	<div style="background: #e0f0ff; padding: 10px; margin: 5px 0;">
		Задача 3
	</div>
	<div style="background: #f0f0f0; padding: 10px;">
		Завершенные
	</div>
</div>

Пример

Давайте создадим список категорий, где категория «Все товары» будет зафиксирована вверху списка, а остальные категории можно будет сортировать:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class CategoryList extends Component
	{
		public $categories = [
			['id' => 1, 'name' => 'Все товары', 'fixed' => true],
			['id' => 2, 'name' => 'Электроника', 'fixed' => false],
			['id' => 3, 'name' => 'Одежда', 'fixed' => false],
			['id' => 4, 'name' => 'Книги', 'fixed' => false],
		];
		
		public function updateOrder($orderedIds)
		{
			$orderedCategories = [];
			$fixedCategory = null;
			
			foreach ($this->categories as $category) {
				if ($category['fixed']) {
					$fixedCategory = $category;
				}
			}
			
			foreach ($orderedIds as $id) {
				foreach ($this->categories as $category) {
					if ($category['id'] == $id && !$category['fixed']) {
						$orderedCategories[] = $category;
						break;
					}
				}
			}
			
			if ($fixedCategory) {
				array_unshift($orderedCategories, $fixedCategory);
			}
			
			$this->categories = $orderedCategories;
		}
		
		public function render()
		{
			return view('livewire.category-list');
		}
	}
?>

<div wire:sortable="updateOrder">
	@foreach ($categories as $category)
		@if ($category['fixed'])
			<div wire:sort:ignore style="background: #e8f5e9; padding: 12px; border-radius: 4px;">
				🔒 {{ $category['name'] }}
			</div>
		@else
			<div wire:sort:item="{{ $category['id'] }}" style="background: #f5f5f5; padding: 12px; margin: 5px 0; border-radius: 4px;">
				{{ $category['name'] }}
			</div>
		@endif
	@endforeach
</div>

Результат выполнения кода:

<div>
	<div style="background: #e8f5e9; padding: 12px; border-radius: 4px;">
		🔒 Все товары
	</div>
	<div style="background: #f5f5f5; padding: 12px; margin: 5px 0; border-radius: 4px;">
		Электроника
	</div>
	<div style="background: #f5f5f5; padding: 12px; margin: 5px 0; border-radius: 4px;">
		Одежда
	</div>
	<div style="background: #f5f5f5; padding: 12px; margin: 5px 0; border-radius: 4px;">
		Книги
	</div>
</div>

Смотрите также

директиву wire:sort,
которая активирует систему сортировки в компоненте
директиву wire:sort.item,
которая определяет сортируемый элемент
директиву wire:sort.handle,
которая добавляет маркер для перетаскивания
директиву wire:sort.group,
которая объединяет элементы в группы