Vue 也能实现拖拽了 (vue-dragging)

前言

vue-dragging 的 npm 包的名字是 awe-dnd，并不是 vue-dragging，
特点 : 封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。
相比及 vuedraggable 来说， awe-dnd 是没有暴露双向绑定的方式，因此提供了事件，在拖拽结束的时候用来更新列表或者是去触发父组件监听的事件。

如何使用

第一步: 安装

npm install awe-dnd --save

第二步: 引入

main.js 文件
// 引入组件
import VueDND from 'awe-dnd'
// 添加至全局
Vue.use(VueDND)

第三步: 使用

<template>
  <div class="color-list">
      <div class="color-item"
          v-for="item in dataList" v-dragging="{ item: item, list: dataList, group: 'color' }"
          :key="color.text">
      {{item .text}}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
        dataList: [{
            text: "red"
        }, {
            text: "blue"
        }, {
            text: "Gold"
        },{
            text: "Blueviolet"
        }, {
            text: "Lightblue"
        }, {
            text: "Cornflowerblue"
        }]
    }
  }
}
</script>

童鞋们发现一个特殊指令: v-dragging="{ item: item, list: dataList, group: 'color' }"
这种形式进行指令绑定，其中 item 就是单个对象，而 list 则是数据列表，group 则是用来声明一个组，来保证可以在一个页面中进行多个数据源的操作。

还有提供两个方法:

export default {
  mounted () {
    this.$dragging.$on('dragged', ({ val }) => {
      console.log(val .item)
      console.log(val .list)
      console.log(val .otherData)
    })
    this.$dragging.$on('dragend', (res) => {
        console.error(res);
    })
  }
}