朋友要做个各种chart图拖拽的页面，发现了有个很好用的拖拽的组件

Awe-dnd

安装

npm install awe-dnd --save

使用

//main.js
import AweDND from 'awe-dnd'

Vue.use(AweDND)

//App.vue
<template>
  <div id="app">
    <div
      class="box"
      v-for="(card,index) in list"
      :key="card.title"
      v-dragging="{item:card, list:list, group:'card'}"
    >
      <div class="img"><img></div>
      <div class="content">{{card.title}}</div>
    </div>
  </div>
</template>

v-dragging="{ item: card,, list: list, group: 'card' }"进行指令绑定
1.card 单个对象，
2.list 数据列表，
3.group 声明一个组，可以在一个页面中进行多个数据源操作
项目地址

preview.gif