I have the code below (simplified for easier reading). And as you can see I am trying to have a "show controls" option to show and hide wire:handle elements, and I don't want the resources to be draggable in any other way.
But with this setup, even without wire:handle elements I can still click on an element, drag it above another and change its position. Is this not possible without making a separate page?
Also even if I remove that whole @if($showControls) statement, meaning if there's no wire:handle element on the page, I can still drag elements around.
<div wire:sortable="sortResources">
@foreach ($page->resources as $resource)
<div wire:key="resource-{{ $resource->id }}" wire:sortable.item="{{ $resource->id }}">
@if($showControls)
<div>
<button>
<i class="fa-solid fa-bars" wire:sortable.handle></i>
</button>
<button wire:click="deleteResource({{ $resource->id }})" wire:confirm="Are you sure?">
<i class="fa-solid fa-trash"></i>
</button>
</div>
@endif
@if($resource->type == 'note')
<div>
{{ $resource->data['content'] }}
</div>
@endif
</div>
@endforeach
</div>
Okay I just noticed this line on the repo's readme, I'll try putting a display:none on the handle instead of completely removing it from the DOM
wire:sortable.handle: This is an optional attribute. If you provide this attribute, then you will only be able to drag an item by dragging this html element. If you do not provide it, then the complete item will draggable.
Yep, that worked, I just removed the if statement and changed the container div to this :
<div @class([
'hidden' => !$showControls,
'flex' => $showControls,])>
<button>
<i class="fa-solid fa-bars" wire:sortable.handle></i>
</button>
<button wire:click="deleteResource({{ $resource->id }})" wire:confirm="Are you sure?">
<i class="fa-solid fa-trash"></i>
</button>
</div>
Please or to participate in this conversation.