Директива wire:sort:group-id

Директива wire:sort:group-id вешается на контейнер, который выступает группой для сортируемых элементов. В значение передаётся строковый идентификатор группы. Она используется в паре с директивой wire:sort:group, которая вешается на дочерние элементы. Это позволяет организовать перетаскивание элементов как внутри одной группы, так и между разными группами с одинаковым идентификатором.

Если элементы из разных групп имеют одинаковый идентификатор, они считаются одной группой, и перетаскивание между ними становится возможным. Если идентификаторы различаются, элементы могут перемещаться только внутри своей группы.

Синтаксис

<div wire:sort:group-id="groupId">
	<div wire:sort:group.item>
		Item 1
	</div>
	<div wire:sort:group.item>
		Item 2
	</div>
</div>

Пример

Давайте создадим две группы с одинаковым идентификатором tasks, чтобы элементы можно было перетаскивать между ними:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TaskBoard extends Component
	{
		public $tasks = [
			'To Do' => ['Task 1', 'Task 2'],
			'Done' => ['Task 3'],
		];
		
		public function updateTaskOrder($group, $items)
		{
			$this->tasks[$group] = $items;
		}
		
		public function render()
		{
			return view('livewire.task-board');
		}
	}
?>

<div style="display: flex; gap: 20px;">
	<div wire:sort:group-id="tasks">
		<h3>To Do</h3>
		@foreach ($tasks['To Do'] as $task)
			<div wire:sort:group.item>
				{{ $task }}
			</div>
		@endforeach
	</div>
	
	<div wire:sort:group-id="tasks">
		<h3>Done</h3>
		@foreach ($tasks['Done'] as $task)
			<div wire:sort:group.item>
				{{ $task }}
			</div>
		@endforeach
	</div>
</div>

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

<div style="display: flex; gap: 20px;">
	<div>
		<h3>To Do</h3>
		<div>Task 1</div>
		<div>Task 2</div>
	</div>
	<div>
		<h3>Done</h3>
		<div>Task 3</div>
	</div>
</div>

Пример

Теперь создадим две группы с разными идентификаторами pending и completed, чтобы элементы не могли перемещаться между ними:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TaskManager extends Component
	{
		public $pending = ['Task A', 'Task B'];
		public $completed = ['Task C'];
		
		public function updatePending($items)
		{
			$this->pending = $items;
		}
		
		public function updateCompleted($items)
		{
			$this->completed = $items;
		}
		
		public function render()
		{
			return view('livewire.task-manager');
		}
	}
?>

<div style="display: flex; gap: 20px;">
	<div wire:sort:group-id="pending" wire:sort:group.update="updatePending">
		<h3>Pending</h3>
		@foreach ($pending as $task)
			<div wire:sort:group.item>
				{{ $task }}
			</div>
		@endforeach
	</div>
	
	<div wire:sort:group-id="completed" wire:sort:group.update="updateCompleted">
		<h3>Completed</h3>
		@foreach ($completed as $task)
			<div wire:sort:group.item>
				{{ $task }}
			</div>
		@endforeach
	</div>
</div>

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

<div style="display: flex; gap: 20px;">
	<div>
		<h3>Pending</h3>
		<div>Task A</div>
		<div>Task B</div>
	</div>
	<div>
		<h3>Completed</h3>
		<div>Task C</div>
	</div>
</div>

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

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