vue3 sortablejs拖拽后重新赋值出现回跳问题

问题描述：

使用Vue3和Sortable.js实现拖拽排序功能，拖拽排序后重新赋值给原数组，出现回跳问题，即拖拽的元素会回到原来的位置。

原因分析：

这是因为拖拽排序后，Sortable.js会将原数组的顺序重新排列，而Vue.js对数组的响应式更新是通过监测数组的变异方法（如push、pop、shift、unshift、splice、sort、reverse等）来实现的，而Sortable.js并没有调用这些变异方法，所以Vue.js并没有检测到数组的变化，从而导致回跳问题。

解决方法：

一种解决方法是手动调用Vue.js的数组变异方法，来更新数组的顺序。具体实现方法如下：

1. 在Vue组件中引入Sortable.js库。

import Sortable from 'sortablejs'

2. 在组件的mounted生命周期钩子中初始化Sortable.js实例，并传入需要排序的元素和配置项。

mounted() {
  this.$nextTick(() => {
    this.sortable = new Sortable(this.$refs.list, {
      onEnd: this.sortHandler
    })
  })
}

其中，onEnd是Sortable.js的一个回调函数，当拖拽结束后会自动调用该函数。

3. 实现sortHandler方法，该方法会在拖拽结束后自动调用，用来更新数组的顺序。

sortHandler(event) {
  const { newIndex, oldIndex } = event
  const item = this.list.splice(oldIndex, 1)[0]
  this.list.splice(newIndex, 0, item)
}

其中，newIndex和oldIndex分别表示拖拽结束时元素的新索引和旧索引。通过splice方法，将拖拽的元素从旧索引位置删除，再将其插入到新索引位置即可。

4. 在组件的beforeUnmount生命周期钩子中，销毁Sortable.js实例。

beforeUnmount() {
  this.sortable.destroy()
}

完整代码示例：

<template>
  <div ref="list">
    <div v-for="(item, index) in list" :key="item.id">
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
        { id: 4, text: 'Item 4' },
        { id: 5, text: 'Item 5' }
      ],
      sortable: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.sortable = new Sortable(this.$refs.list, {
        onEnd: this.sortHandler
      })
    })
  },
  beforeUnmount() {
    this.sortable.destroy()
  },
  methods: {
    sortHandler(event) {
      const { newIndex, oldIndex } = event
      const item = this.list.splice(oldIndex, 1)[0]
      this.list.splice(newIndex, 0, item)
    }
  }
}
</script>