Laravel 8使用Livewire Sortable拖拽释放后视图回退且不触发更新方法

• 数据查询未按排序字段排序：你修改了数据库的sort字段值后，组件渲染时拉取的$data集合仍然使用默认的排序规则（如按id倒序），Livewire重新渲染视图时就会回到拖拽前的顺序，看起来就像自动回弹。
• 插件与Livewire版本不兼容：你使用的0.1.1版本sortable插件和部分Livewire 2.x小版本存在事件兼容问题，会导致拖拽结束后的提交事件没有正常发出，updateTaskOrder方法不会被触发，数据库不会更新，视图自然也不会变更排序。
• 组件渲染冲突：Sortable的拖拽动画和Livewire的自动渲染逻辑存在冲突时，也会出现拖拽后回弹的情况。

1. 修正数据查询逻辑
   在组件的render或mount方法中，确保查询Outlines数据时按sort字段升序排列：

// 替换你原来获取$data的代码
$this->data = Outlines::orderBy('sort', 'asc')->get();

在updateTaskOrder方法执行完更新逻辑后，强制刷新数据集合，避免使用缓存的旧数据：

public function updateTaskOrder($list){
    foreach($list as $item){
        Outlines::find($item['value'])->update(['sort' => $item['order']]);
    }
    // 新增以下代码刷新数据
    $this->data = Outlines::orderBy('sort', 'asc')->get();
}

2. 升级Sortable插件版本
   将app.blade.php中引入的插件CDN链接替换为最新稳定版，解决版本兼容问题：

@livewireScripts
<script src="https://unpkg.com/@nextapps-be/livewire-sortablejs@latest/dist/livewire-sortable.js"></script>

3. 优化Sortable配置
   在拖拽根元素上添加配置参数，避免动画和渲染冲突：

<div class="text-gray-700" wire:sortable="updateTaskOrder" wire:sortable.options="{ animation: 150 }">

做完以上三步后再测试拖拽功能，即可解决回弹和事件不触发的问题。

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