FilamentPHP自定义页面拖拽排序：如何获取排序后列表？

你的排序功能正常但无法通过$event.detail获取排序结果，可能是Alpine.js sortable插件的事件参数未正确返回，或者事件监听名称有误。可以通过以下两种方式解决：

方法一：手动收集排序后的ID列表 #

直接在排序结束事件中，从DOM中提取所有排序项的ID，这种方式不受插件事件参数影响，兼容性更强：

<div
    x-data="{}"
    x-sortable
    x-on:end="
        // 获取所有排序项元素，提取它们的x-sortable-item属性值
        const sortedTaskIds = Array.from($el.querySelectorAll('[x-sortable-item]')).map(item => item.getAttribute('x-sortable-item'));
        console.log('排序后的任务ID列表:', sortedTaskIds);
        
        // 可选：将排序结果提交到后端保存（Filament后端路由示例）
        fetch('{{ route('tasks.update-order') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ task_order: sortedTaskIds })
        });
    "
    class="flex flex-col gap-2"
>
    @foreach ($tasks as $task)
        <div
            x-sortable-handle
            x-sortable-item="{{ $task->id }}"
            class="py-2 bg-white px-4"
        >
            {{ $task->title }}
        </div>
    @endforeach
</div>

方法二：使用插件正确的事件监听 #

如果你使用的是官方@alpinejs/sortable插件，正确的排序完成事件是sort而非end或sortupdate，尝试替换事件监听：

<div
    x-data="{}"
    x-sortable
    x-on:sort="console.log('排序完成', $event.detail)"
    class="flex flex-col gap-2"
>
    @foreach ($tasks as $task)
        <div
            x-sortable-handle
            x-sortable-item="{{ $task->id }}"
            class="py-2 bg-white px-4"
        >
            {{ $task->title }}
        </div>
    @endforeach
</div>

注意：$event.detail的结构取决于你使用的sortable插件版本，部分版本会返回包含oldIndex、newIndex等信息的对象，但如果需要完整排序列表，方法一的手动收集方式更直接可靠。

内容的提问来源于stack exchange，提问作者Mohamed Mahmoud