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

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

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于企业网站制作,高端网页制作,对成都发电机租赁等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业网站推广优化,H5建站,响应式网站。

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组件实现一个拖动排序功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

网站题目：怎么在vue2中使用vuedraggable组件实现一个拖动排序功能
URL分享：https://www.cdcxhl.com/article28/pjdecp.html

成都网站建设公司_创新互联，为您提供标签优化、做网站、网站设计、网站维护、App设计、商城网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联