iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
0
自我挑戰組

使用Vue製作簡單的 WorkBoard (30天)系列 第 22

(第二十二天)自我練習專案 - Bootstrap Card 移動

來使用 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>

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


上一篇
(第二十一天)自我練習專案 - Bootstrap使用
下一篇
(第二十三天)自我練習專案 - 新增卡片
系列文
使用Vue製作簡單的 WorkBoard (30天)24

尚未有邦友留言

立即登入留言