來使用 Bootstrap Card

我們這次可以幫 Draggable 加入卡片的樣式

//一樣在 data 裡面新增兩個 list 
cards: [
    {
        name: 'Lucy'
    },
    {
        name: 'Amy'
    },
    {
        name: 'peter'
    },
    {
        name: 'test'
    }
],
cards2: [{
    name: 'test'
}]

再來把 draggable 修改一下樣式

<h1>Card1</h1>
<draggable v-model="cards" class="dragArea" :options="{group:'people'}">
    <div v-for="card in cards">
        <div class="card">
            <div class="card-body">
                <div>{{ card.name}}</div>
            </div>
        </div>
    </div>
</draggable>
<h1>Card2</h1>
<draggable v-model="cards2" class="dragArea" :options="{group:'people'}">
    <div v-for="card in cards2">
        <div class="card">
            <div class="card-body">
                <div>{{ card.name}}</div>
            </div>
        </div>
    </div>
</draggable>

這樣是不是跟我們之前的不太一樣呢！