vue中使用拖拽插件

先看效果

安装

npm install awe-dnd --save

 

在main.js中，通过Vue.use导入插件

import VueDND from 'awe-dnd'

Vue.use(VueDND)

 组件中使用的案例

<template>
    <!-- 要拖拽的列表 -->
  <div class="color-list">
      <!-- 要拖拽模块 -->
    <div 
        class="color-item" 
        v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color',}"
        :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)  //打印拖拽的当前item的颜色
      console.log(value.list)
      //console.log(value.otherData)
    })
    //无参添加拖拽事件
    this.$dragging.$on('dragend', () => {
        
    })
  }
}
//插件参数解析
//  item   Object类型   每一个可拖拽的对象
//  list   Array类型    可拖拽对象的数组
//  group  String类型   key值
</script>

<style scoped>
.color-item{
    height: 30px;
    margin-top: 10px;
    line-height: 30px;
    text-align: center;
    border:1px solid black;
}
.color-item:nth-child(odd){
background:yellowgreen;
}
</style>

插件参数解析
 item   Object类型     每一个可拖拽的对象
 list   Array类型    可拖拽对象的数组
 group  String类型   key值