iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0
自我挑戰組

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

(第十七天)自我練習專案 - 資料的移動

  • 分享至 

  • twitterImage
  •  

開始練習 WorkBoard 需要的套件

Vue.Draggable 是這次我們用來製作 WorkBoard 的重要套件,這個套件可以實現我們在實作 WorkBoard 卡片移動功能,也是最重要的。


那一開始我們需要把他的套件引入進來

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>

以下是範例,我們可以看到裡面有許多的屬性之後會一一的介紹來使用

<draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>

參考資料


上一篇
(第十六天)自我學習 - component 事件傳遞
下一篇
(第十八天)自我練習專案 - 可以移動的資料
系列文
使用Vue製作簡單的 WorkBoard (30天)24
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言