vue Draggable实现拖动改变顺序

本文实例为大家分享了vue Draggable实现拖动改变顺序的具体代码，供大家参考，具体内容如下

1、npm install vuedraggable

2、import draggable from 'vuedraggable'

3、示例代码

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

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

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

<script>

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。