朋友要做個(gè)各種chart圖拖拽的頁(yè)面佛南,發(fā)現(xiàn)了有個(gè)很好用的拖拽的組件
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' }"進(jìn)行指令綁定
1.card 單個(gè)對(duì)象甫男,
2.list 數(shù)據(jù)列表蒲赂,
3.group 聲明一個(gè)組梯浪,可以在一個(gè)頁(yè)面中進(jìn)行多個(gè)數(shù)據(jù)源操作
項(xiàng)目地址
preview.gif