Multiple groups with draggable items doesnt work without a handle

[patrykszady]

Hi, when recreating the below "Multiple groups with draggable items" the sortable-group.handle is required, if it's removed the item is not draggable. When I remove the <button wire:sortable-group.handle>drag</button> the item is no longer draggable at all. This works in a simple draggable list but doesn't work in groups. I checked with the livewire/sortable package, and it works. Any ideas on how to make the entire <li> function as a draggable button without a handle?

<div wire:sortable-group="updateTaskOrder">
    @foreach ($groups as $group)
        <div wire:key="group-{{ $group->id }}">
            <h4>{{ $group->label }}</h4>

            <ul wire:sortable-group.item-group="{{ $group->id }}" wire:sortable-group.options="{ animation: 100 }">
                @foreach ($group->tasks()->orderBy('order')->get() as $task)
                    <li wire:sortable-group.item="{{ $task->id }}" wire:key="task-{{ $task->id }}">
                        <span>{{ $task->title }}</span>
                        <button wire:sortable-group.handle>drag</button>
                    </li>
                @endforeach
            </ul>
        </div>
    @endforeach
</div>

Thanks.
Patryk

[patrykszady]

Ok, so I just moved wire:sortable-group.handle to the li and it works but is still required where it is not required in a simple single list.