2023Vue 中如何实现列表排序及拖动排序？

随着前端开发技术的不断发展，越来越多的网站和应用需要在界面上实现拖拽排序的功能。在Vue框架中，我们可以使用一些库或者组件来轻松地实现列表排序及拖动排序功能。

一、使用sortable.js实现列表排序

sortable.js是一个独立的库，可以支持列表的拖拽排序功能。在Vue.js中，我们使用sortable.js可以实现列表的排序功能。

首先，我们需要在项目中安装sortable.js，可以使用npm命令安装：

npm install sortablejs --save

然后在组件中引入sortable.js：

import Sortable from 'sortablejs'

然后在组件的mounted钩子函数中，使用sortable.js初始化列表，如下所示：

mounted() {
  let el = this.$refs.list
  this.sortable = Sortable.create(el, {
    onEnd: this.onEnd
  })
},
methods: {
  onEnd: function (evt) {
    // 拖动后的排序操作
  }
}

其中，onEnd是当一个列表项拖拽结束后的回调函数，在该函数中我们可以对列表顺序进行重新排序，也可以将重新排列后的列表序列存储到数据库或者服务器。

二、使用vue-draggable实现拖动排序

vue-draggable是一个基于Vue.js的可拖拽排序列表组件，它可以轻松地实现列表的拖拽排序功能。使用vue-draggable可以在Vue.js应用程序中实现交互性列表，例如：拖动表格行，改变图块大小和位置等。

安装vue-draggable可以使用npm命令：

npm install vuedraggable --save

然后在组件中使用vue-draggable组件，如下所示：

<template>
  <draggable v-model="list" :element="'ul'">
    <li v-for="item in list" :key="item.id">
      {{ item.id }}. {{ item.text }}
    </li>
  </draggable>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    components: { draggable },
    data() {
      return {
        list: [
          { id: 1, text: 'Vue.js' },
          { id: 2, text: 'React.js' },
          { id: 3, text: 'Angular.js' },
          { id: 4, text: 'Ember.js' },
          { id: 5, text: 'Backbone.js' },
          { id: 6, text: 'Knockout.js' }
        ]
      }
    }
  }
</script>

在上面的代码中，我们使用vue-draggable组件将列表进行了封装，并且使用v-model指令绑定了组件的list数据，这样就可以通过拖拽来改变列表顺序了。

三、使用Vue Sortable实现拖动排序

Vue Sortable是Vue.js的一个组件，它可以让我们轻松地实现高度可定制的列表拖拽排序功能。Vue Sortable不需要配置，只需要使用简单的Vue.js模板语法就可以实现拖拽排序列表。

安装Vue Sortable也可以使用npm命令：

npm install vue-sortable --save

然后在组件中使用Vue Sortable组件，如下所示：

<template>
  <div>
    <ul v-sortable="{data: list, onUpdate: onUpdate}">
      <li v-for="item in list" :key="item.id">
        {{ item.id }}. {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
  import VueSortable from 'vue-sortable'

  export default {
    components: { VueSortable },
    data() {
      return {
        list: [
          { id: 1, text: 'Vue.js' },
          { id: 2, text: 'React.js' },
          { id: 3, text: 'Angular.js' },
          { id: 4, text: 'Ember.js' },
          { id: 5, text: 'Backbone.js' },
          { id: 6, text: 'Knockout.js' }
        ]
      }
    },
    methods: {
      onUpdate: function (event) {
        // 拖动后的排序操作
      }
    }
  }
</script>

在上面的代码中，我们使用了vue-sortable指令将列表设置为可排序的，并且使用了onUpdate回调函数来在拖拽排序结束后更新列表。

通过上述三种方法，我们可以方便地实现Vue中的列表排序及拖动排序功能，从而让我们的应用程序更加具有交互性和易用性。