vue实现列表拖拽排序的功能

让我们来讲解一下如何使用Vue实现列表拖拽排序的功能。

1. 需求分析

在开始编码之前，需要先确定我们需要实现的功能的具体需求，大致如下：

• 实现一个可拖拽的列表，用户可以通过拖拽来排序列表中的元素
• 当用户拖拽元素改变其位置时，相应的state也需要跟着更新
• 当用户完成排列时，需要将排好序的state提交到服务器

2. 实现步骤

2.1 安装vue-draggable插件

vue-draggable是一个非常简单易用的Vue拖拽库，它可以轻松地实现列表的拖动和排序功能。首先，我们需要在项目中安装vue-draggable插件。

通过以下命令来进行安装：

npm install vuedraggable --save

2.2 引入vue-draggable插件

在Vue的入口文件中引入该插件：

import draggable from 'vuedraggable'

2.3 实现列表拖拽排序

在Vue组件中添加如下代码，即可实现列表拖拽排序的功能：

<draggable v-model="list">
  <div v-for="item in list" :key="item.id">
    {{ item.content }}
  </div>
</draggable>

上面的代码中，v-model绑定的是列表数据，而v-for指令则是用来渲染列表项的。draggable内部的div标签表示每个列表项的内容，其中的v-for指令会遍历list数组中的每个元素，渲染出对应的列表项。同时，因为我们需要跟踪列表项的顺序，所以每个列表项的key属性需要设置为一个唯一的值。

2.4 更新state以及向服务器提交数据

当用户完成排列后，我们需要将排好序的列表提交到服务器，同时更新Vue的状态。为此，我们需要在列表移动时监听onEnd事件，并在这里更新state以及提交给服务器。

以下是一个示例：

<draggable v-model="list" @end="onEnd">
  <div v-for="item in list" :key="item.id">
    {{ item.content }}
  </div>
</draggable>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        {
          id: 1,
          content: 'item 1'
        },
        {
          id: 2,
          content: 'item 2'
        },
        {
          id: 3,
          content: 'item 3'
        }
      ]
    }
  },
  methods: {
    onEnd(evt) {
      // 更新Vue状态
      this.list = evt.to.children.map((child, index) => {
        return {
          id: child.dataset.id,
          content: child.innerText,
          order: index + 1
        }
      })
      // 提交到服务器
      axios.post('/updateList', {list: this.list})
    }
  }
}
</script>

在上面的示例中，我们在onEnd事件中更新了Vue的状态，步骤如下：

1. 使用map()方法遍历evt.to.children（即排好序的列表元素）
2. 对于每个元素，生成一个对象，该对象包含元素的id和content属性，以及该元素在列表中的位置order属性（从1开始计数）。这样做的目的是为了在后续的列表提交时，服务器可以正确地保存元素的位置信息。
3. 将更新后的list数组提交到服务器，这里我们使用了axios库。

3. 示例代码说明

以上是如何使用vue-draggable插件来实现列表拖拽排序的完整攻略。以下是该功能的完整代码示例：

<template>
  <div>
    <draggable v-model="list" @end="onEnd">
      <div v-for="item in list" :key="item.id" :data-id="item.id">
        {{ item.content }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import axios from 'axios'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        {
          id: 1,
          content: 'item 1'
        },
        {
          id: 2,
          content: 'item 2'
        },
        {
          id: 3,
          content: 'item 3'
        }
      ]
    }
  },
  methods: {
    onEnd(evt) {
      // 更新Vue状态
      this.list = evt.to.children.map((child, index) => {
        return {
          id: child.dataset.id,
          content: child.innerText,
          order: index + 1
        }
      })
      // 提交到服务器
      axios.post('/updateList', {list: this.list})
    }
  }
}
</script>

以上代码中，我们实现了一个简单的拖拽排序功能，并且使用axios库将排好序的列表数据提交到了服务器。具体实现方法已在前文中做了详细解释。

另外，如果需要实现可拖拽的嵌套列表，可以通过在draggable组件中嵌套draggable组件来实现。具体的代码示例可以参考vue-draggable的官方文档。