移動 Column

我們這次要學的是 column 的移動，因為每個卡片都需要有自己的意思，當然在 column 裡面會有卡片，所以 Column 代表我們卡片的狀態。

Column 也是使用 list 組成的

//在 data 裡面新增
//主要的工作看板上面會有很多的 Column 所以我們把工作看板取名為 board 再來裡面的話會有這個 board 的名稱、他的 id 還有 Column 。
boards: [
    {        
       name: "C1",
       id: 1,
       jobs: [
           {
                jobNumber: "14037-12"
           },
           {
                jobNumber: "14038-13"
           },
           {
                jobNumber: "14048-15"
           }
      ]
    }
]

再來是標籤裡面的內容

<div class="container-fluid" id="app">

  <div v-for="board in boards">
  
    <div class="container-fluid machine-contents">
 
      <draggable v-model="machine.jobs">
        <transition-group name="list-complete">
          <div v-for="(job, index) in board.jobs" 
               v-bind:key="job.jobNumber"
               class="list-complete-item" 
          >
            <div>
              {{ job.jobNumber }}
            </div>

          </div>
        </transition-group>
      </draggable>
      
    </div>   
    
  </div>
  
</div>

再來讓他有一點動畫效果

.list-complete-item {
  padding: 4px;
  margin-top: 4px;
  border: solid 1px;
  transition: all 1s;
}

.list-complete-enter, .list-complete-leave-active {
  opacity: 0;
}

這樣是不是就可以讓 column 互換了呢