vue list 拖动排序

Vue中可以通过使用第三方库实现列表拖动排序的功能。其中比较常用的库有vue-draggable和vuedraggable。

首先，你需要在项目中安装相应的库。以vue-draggable为例，可以通过以下命令进行安装：

npm install vuedraggable --save

然后，在需要使用拖动排序功能的组件中，引入并注册vuedraggable：

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

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' }
      ]
    }
  }
}
</script>

在上述例子中，我们将需要进行拖动排序的列表数据绑定到v-model中，并将其包裹在draggable组件中。通过v-for指令渲染出每个列表项，并设置每个列表项的key属性。

此外，vuedraggable还提供了一些属性和事件，可以用来自定义拖动排序的行为，比如设置排序的方向、限制拖动范围、拖动开始和结束的回调函数等。具体可以查看官方文档。

希望这个回答能够帮到你。