vue2 拖动排序 vuedraggable组件的实现

一、安装插件

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>

https://github.com/SortableJS/Vue.Draggable

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。