怎么在vue2 中使用vuedraggable组件实现一个拖动排序功能

怎么在vue2 中使用vuedraggable组件实现一个拖动排序功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

vue是什么软件

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

一、安装插件

npm install -D vuedraggable

二、在需要排序的界面中引入组件

<script> import draggable from 'vuedraggable' export default {  name: 'HelloWorld',  components: {   draggable  },

三、在模板中使用

<draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move">   <div v-for="(item, index) in groups" :key=index>    item {{item}}   </div> </draggable>

四、实现change、start、end、move方法，v-model绑定的数据就是排序后的数据，可以传递给后台修改数据库数据

methods: {   change (event) {    console.log('change', event)   },   start (event) {    console.log('start', event)   },   end (event) {    console.log('end', event, this.groups)   },   move (event, orgin) {    console.log('move', event, orgin)   } }

五、完整代码，参考网址

<template>  <div>   排序   <draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move">    <!-- <transition-group> -->     <div v-for="(item, index) in groups" :key=index>      item {{item}}     </div>    <!-- </transition-group> -->   </draggable>  </div> </template> <script> import draggable from 'vuedraggable' export default {  name: 'HelloWorld',  components: {   draggable  },  data () {   return {    groups: [     1, 2, 3, 4, 5    ]   }  },  methods: {   change (event) {    console.log('change', event)   },   start (event) {    console.log('start', event)   },   end (event) {    console.log('end', event, this.groups)   },   move (event, orgin) {    console.log('move', event, orgin)   }  } } </script> <style scoped> </style>

看完上述内容，你们掌握怎么在vue2 中使用vuedraggable组件实现一个拖动排序功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！