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

Директива wire:sort используется для создания сортируемых списков в компонентах Livewire. Она позволяет пользователям изменять порядок элементов через перетаскивание (drag-and-drop). В значении директивы передаётся имя метода компонента, который будет вызываться после каждого изменения порядка. Метод получает текущий порядок элементов в виде массива их идентификаторов.

Синтаксис

<ul wire:sort="updateOrder">
	@foreach ($items as $item)
		<li wire:key="item-{{ $item['id'] }}" wire:sort.item="{{ $item['id'] }}">
			{{ $item['name'] }}
			<span wire:sort.handle>⠿</span>
		</li>
	@endforeach
</ul>

Базовый пример

Создадим компонент для управления списком задач. Пользователь может менять порядок задач перетаскиванием.

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class TaskList extends Component
	{
		public $tasks = [
			['id' => 1, 'name' => 'Task A'],
			['id' => 2, 'name' => 'Task B'],
			['id' => 3, 'name' => 'Task C'],
		];
		
		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>
	<ul wire:sort="updateOrder">
		@foreach ($tasks as $task)
			<li wire:key="task-{{ $task['id'] }}" wire:sort.item="{{ $task['id'] }}">
				<span wire:sort.handle>⠿</span>
				{{ $task['name'] }}
			</li>
		@endforeach
	</ul>
	
	<h3>Current order:</h3>
	<ul>
		@foreach ($tasks as $task)
			<li>{{ $task['name'] }}</li>
		@endforeach
	</ul>
</div>

Пример с сортировкой массива

В этом примере мы сортируем список чисел. Метод получает новый порядок и обновляет массив.

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class NumberList extends Component
	{
		public $numbers = [10, 20, 30, 40, 50];
		
		public function reorder($orderedIds)
		{
			$orderedNumbers = [];
			
			foreach ($orderedIds as $id) {
				if (isset($this->numbers[$id])) {
					$orderedNumbers[] = $this->numbers[$id];
				}
			}
			
			$this->numbers = $orderedNumbers;
		}
		
		public function render()
		{
			return view('livewire.number-list');
		}
	}
?>

<div>
	<ul wire:sort="reorder">
		@foreach ($numbers as $index => $number)
			<li wire:key="num-{{ $number }}" wire:sort.item="{{ $index }}">
				<span wire:sort.handle>⠿</span>
				{{ $number }}
			</li>
		@endforeach
	</ul>
</div>

После перетаскивания элементов Livewire вызовет метод reorder с массивом новых индексов, и список обновится.

Пример с группой сортировки

Если у вас несколько независимых списков, используйте директиву wire:sort.group для группировки.

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class GroupSort extends Component
	{
		public $groupA = ['apple', 'banana', 'cherry'];
		public $groupB = ['date', 'elderberry', 'fig'];
		
		public function updateGroupA($orderedIds)
		{
			$ordered = [];
			foreach ($orderedIds as $id) {
				$ordered[] = $this->groupA[$id];
			}
			$this->groupA = $ordered;
		}
		
		public function updateGroupB($orderedIds)
		{
			$ordered = [];
			foreach ($orderedIds as $id) {
				$ordered[] = $this->groupB[$id];
			}
			$this->groupB = $ordered;
		}
		
		public function render()
		{
			return view('livewire.group-sort');
		}
	}
?>

<div>
	<h4>Group A</h4>
	<ul wire:sort.group="groupA" wire:sort="updateGroupA">
		@foreach ($groupA as $index => $value)
			<li wire:key="a-{{ $index }}" wire:sort.item="{{ $index }}">
				<span wire:sort.handle>⠿</span>
				{{ $value }}
			</li>
		@endforeach
	</ul>
	
	<h4>Group B</h4>
	<ul wire:sort.group="groupB" wire:sort="updateGroupB">
		@foreach ($groupB as $index => $value)
			<li wire:key="b-{{ $index }}" wire:sort.item="{{ $index }}">
				<span wire:sort.handle>⠿</span>
				{{ $value }}
			</li>
		@endforeach
	</ul>
</div>

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

директиву wire:sort.item,
которая задаёт идентификатор элемента для сортировки
директиву wire:sort.group,
которая группирует связанные списки
директиву wire:sort.handle,
которая определяет элемент для захвата при перетаскивании
директиву wire:key,
которая обеспечивает уникальную идентификацию элементов в цикле