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

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

Синтаксис

<div wire:sort="updateOrder">
	@foreach ($items as $item)
		<div wire:sort:item="{{ $item->id }}">
			{{ $item->name }}
		</div>
	@endforeach
</div>

Пример

Создадим компонент с сортируемым списком задач:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use AppModelsTask;
	
	class TodoList extends Component
	{
		public $tasks;
		
		public function mount()
		{
			$this->tasks = Task::orderBy('order')
				->get();
		}
		
		public function updateOrder($orderedIds)
		{
			foreach ($orderedIds as $index => $taskId) {
				Task::where('id', $taskId)
					->update(['order' => $index + 1]);
			}
			
			$this->tasks = Task::orderBy('order')
				->get();
		}
		
		public function render()
		{
			return view('livewire.todo-list');
		}
	}
?>

<div>
	<h2>Todo List</h2>
	
	<div wire:sort="updateOrder">
		@foreach ($tasks as $task)
			<div wire:sort:item="{{ $task->id }}"
				 style="padding: 10px; border: 1px solid #ccc;">
				{{ $task->name }}
			</div>
		@endforeach
	</div>
</div>

После перетаскивания элементов метод updateOrder получит массив ID задач в новом порядке:

[3, 1, 2, 4, 5]

Пример

Используем директиву wire:sort:item с дополнительными классами для визуального отображения:

<div>
	<div wire:sort="updateOrder">
		@foreach ($items as $item)
			<div wire:sort:item="{{ $item->id }}"
				 class="sortable-item">
				<span class="drag-handle">⠿</span>
				<span>{{ $item->name }}</span>
				<span class="item-order">#{{ $loop->iteration }}</span>
			</div>
		@endforeach
	</div>
</div>

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

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