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>　

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

    })
  }
}

转自：https://www.cnblogs.com/woshidouzia/p/9304813.html