Sortable.js/Vue Draggable@next 元素初始顺序异常问题如何解决？

• 优先修正v-model绑定对象
  不要绑定computed返回的衍生数组、map/filter生成的临时数组，这类数组每次触发响应式更新都会生成新引用，导致Draggable误判重排。必须直接绑定原始的响应式状态数组，数组加工逻辑移到列表项内部的渲染层实现。
• 保证itemKey的唯一性与稳定性
  禁止用索引、动态生成的随机值作为itemKey，必须绑定数组项自带的固定唯一字段，示例写法：

  <!-- 错误写法 -->
  <draggable :itemKey="(item, index) => index" ... />
  
  <!-- 正确写法 -->
  <draggable :itemKey="(item) => item.id" ... />
  

• 关闭冲突配置项
  强制关闭forceFallback配置，该配置开启时容易和Vue响应式更新逻辑冲突，导致初始排序异常，示例配置：

  <draggable 
    v-model="yourList" 
    :itemKey="item => item.id"
    :options="{ forceFallback: false }"
  >
    <!-- 列表项插槽 -->
  </draggable>
  

• 异步加载场景加渲染判断
  如果数组是接口异步返回的，等数组完整赋值后再渲染Draggable组件，避免空数组渲染后再赋值触发重排：

  <draggable v-if="yourList.length" v-model="yourList" ... />
  

• 兜底手动对齐方案
  上述方案都不生效时，可以在首次赋值完成后手动调用Sortable实例的sort方法对齐顺序：

  <template>
    <draggable ref="draggableRef" v-model="yourList" :itemKey="item => item.id" ... />
  </template>
  <script setup>
  import { ref, nextTick } from 'vue'
  const draggableRef = ref(null)
  const yourList = ref([])
  
  // 数组赋值逻辑，比如接口请求
  const fetchList = async () => {
    const res = await api.getList()
    yourList.value = res.data
    // 赋值后手动对齐顺序
    await nextTick()
    const order = yourList.value.map(item => item.id)
    draggableRef.value.sortable.sort(order)
  }
  </script>
  

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