<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>

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

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

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

<script>

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

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