Vue awe-dnd拖拽排序插件

  最近有个测试朋友在学前端，问Vue有没有拖拽排序的现成插件不想重新造轮子。找了下发现还真有现成的，简单整理了下分享出来！

安装

npm install awe-dnd --save

引入

到项目的main.js中，使用Vue.use引入

import VueDND from 'awe-dnd'
Vue.use(VueDND)

API

Vue指令的方式调用

 v-dragging="{ item: color, list: colors, group: 'color' }"

vue文件中的使用

<template>
  <div class="color-list">
    <div
      class="color-item"
      v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
      :key="color.text"
    >{{color.text}}</div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        colors: [{
          text: "Aquamarine"
        }, {
          text: "Hotpink"
        }, {
          text: "Gold"
        }, {
          text: "Crimson"
        }, {
          text: "Blueviolet"
        }, {
          text: "Lightblue"
        }, {
          text: "Cornflowerblue"
        }, {
          text: "Skyblue"
        }, {
          text: "Burlywood"
        }]
      }
    },
    mounted () {
      this.$dragging.$on('dragged', ({ value }) => {
        console.log(value.item)
        console.log(value.list)
        console.log(value.otherData)
      })
      this.$dragging.$on('dragend', () => {
      })
    }
  }
</script>

组件参数Arguments