本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。