【VUE常用插件】用vuedraggable组件实现拖拽排序

 一、安装

cnpm i vuedraggable --save

 二、引入 在对应页面

import draggable from 'vuedraggable'

三、参考代码 

<template>
  <div>
    <draggable v-model="groups" @chang="change" @start="start" :move="move" @end="end">
      <div v-for="(item, index) in groups" :key=index>{{item}}</div>
    </draggable>
  </div>
</template>
<script>
  import draggable from 'vuedraggable'
  export default {
    name: 'dragSort',
    components: {
      draggable
    },
    data () {
      return {
        groups: ['111','222','333']
      }
    },
    methods: {
      change (event) {
        console.log('change', event)
      },
      start (event) {
        console.log('start', event)
      },
      move (event, orgin) {
        console.log('move', event, orgin)
      },
      end (event) {
        console.log('end', event, this.groups)
      },
    }
  }
</script>