-
npm install vuedraggable
-
import draggable from 'vuedraggable'
-
示例代码
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>