Группа перетаскивания в Livewire

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

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

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

php artisan make:livewire PostColumns --class

Давайте заведём два массива и свойство для подписи:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostColumns extends Component
	{
		public $left = [
			1 => 'News',
			2 => 'Note',
		];
		
		public $right = [
			3 => 'Draft',
		];
		
		public $note = '';
		
		public function handleSort($id, $position)
		{
			$this->note = (string) $id;
		}
		
		public function render()
		{
			return view('livewire.post-columns');
		}
	}
?>

Давайте выведем два списка с общей группой и подпись:

<div>
	<ul
		wire:sort="handleSort"
		wire:sort:group="handleSort"
	>
		@foreach ($left as $id => $title)
			<li
				wire:key="left-{{ $id }}"
				wire:sort:item="{{ $id }}"
			>
				{{ $title }}
			</li>
		@endforeach
	</ul>
	<ul
		wire:sort="handleSort"
		wire:sort:group="handleSort"
	>
		@foreach ($right as $id => $title)
			<li
				wire:key="right-{{ $id }}"
				wire:sort:item="{{ $id }}"
			>
				{{ $title }}
			</li>
		@endforeach
	</ul>
	<div>{{ $note }}</div>
</div>

Давайте добавим маршрут и страницу:

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

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

Создайте компонент EmployeeColumns. Имя работника можно перетащить из левого столбца в правый.