Vue 中使用 vuedraggable 实现列表拖拽排序

Vue 拖拽排序功能实现概述

本文分享基于 Vue 和 vuedraggable 库实现列表拖拽排序的具体代码示例，供读者参考学习。

环境安装与引入

首先执行命令 npm install vuedraggable 安装依赖包。

接着在代码中通过 import draggable from 'vuedraggable' 引入组件。

核心代码示例

以下提供完整的示例代码供参考。

Test.vue 组件实现

Test.vue 文件内容如下：

<template>
 <ul class="sort-ul">
    <div>45454</div>
    <draggable  group="article" :value="sortArr" @input="handleListChange($event)">
       <li v-for="(item,index) in sortArr" :key="index">
         <h2>{{item.title}}</h2>
       </li>
    </draggable>
  </ul>
</template>
<script>
import Draggable from 'vuedraggable';

export default {
  name: 'Test',
  props:{
  },
  data () {
    return {
      fileList: [],
      sortArr:[
        {title:"00"},
        {title:"01"},
        {title:"02"},
        {title:"03"},
        {title:"04"},
        {title:"05"},
        {title:"06"},
        {title:"07"},
        {title:"08"},
        {title:"09"},
      ],
    }
  },
  components: {
    Draggable,  
  },
  methods: {
      // 更新位置
      handleListChange(event){
        console.log(event);
        this.sortArr = event;
      }
  },
  mounted () {
   
  }
}
</script>
<style>
  ul{
    padding: 0;
    width: 400px;
  }

  li{
    width: 100px;
    float:left;
  }

</style>

main.js 入口配置

main.js 文件配置如下：

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    components: { App },
    template: '<App/>'
})

app.vue 根组件

app.vue 文件结构如下：

<template>
  <div id="app">
    <Test />
  </div>
</template>

<script>

import Test from '@/components/Test.vue'

export default {
  name: 'App',
  components:{
    Test,
  },
  methods: {
  }
}
</script>

以上即为 Vue 实现拖拽排序功能的全部内容，希望能为读者提供有益的帮助。