filament sorting using x-sortable
<div>
<button x-on:click="console.log('test')">test</button>
<div
x-data="{}"
x-sortable
x-on:end="console.log('Sorting ended!', $event)"
class="flex flex-col gap-2"
>
<div
class="py-2 bg-white px-4"
>
test1
</div>
@foreach ($users as $user)
<div
x-sortable-handle
x-sortable-item="{{ $user->id }}"
x-id="{{ $user->id }}"
class="py-2 bg-white px-4"
>
<span class="text-success-500">{{ $user->email }}</span>
</div>
@endforeach
<div
x-sortable-handle.prevent
x-sortable-item=""
class="py-2 bg-white px-4"
>
test
</div>
</div>
</div>
<div>
<button x-on:click="console.log('test')">test</button>
<div
x-data="{}"
x-sortable
x-on:end="console.log('Sorting ended!', $event)"
class="flex flex-col gap-2"
>
<div
class="py-2 bg-white px-4"
>
test1
</div>
@foreach ($users as $user)
<div
x-sortable-handle
x-sortable-item="{{ $user->id }}"
x-id="{{ $user->id }}"
class="py-2 bg-white px-4"
>
<span class="text-success-500">{{ $user->email }}</span>
</div>
@endforeach
<div
x-sortable-handle.prevent
x-sortable-item=""
class="py-2 bg-white px-4"
>
test
</div>
</div>
</div>
1 Reply
i have the same question
Here i found it
x-data="{}"
x-sortable
x-on:end="console.log('end', $event);
itemsSordetIds = $event.target.querySelectorAll('[x-sortable-item]');
itemsSordetIdsArray = [];
for (var i = 0; i < itemsSordetIds.length; i++) {
itemsSordetIdsArray.push(itemsSordetIds[i].getAttribute('x-sortable-item'));
}
console.log(itemsSordetIdsArray)
"
x-data="{}"
x-sortable
x-on:end="console.log('end', $event);
itemsSordetIds = $event.target.querySelectorAll('[x-sortable-item]');
itemsSordetIdsArray = [];
for (var i = 0; i < itemsSordetIds.length; i++) {
itemsSordetIdsArray.push(itemsSordetIds[i].getAttribute('x-sortable-item'));
}
console.log(itemsSordetIdsArray)
"