朋友要做個各種chart圖拖拽的頁面，發(fā)現(xiàn)了有個很好用的拖拽的組件

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 數(shù)據(jù)列表，
3.group 聲明一個組，可以在一個頁面中進行多個數(shù)據(jù)源操作
項目地址

preview.gif