Vuejs List Transition with draggable component

Vuejs List Transition with draggable component.

by imys

HTML

<script src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Draggable/master/dist/vuedraggable.js"></script>
<div class="container-fluid" id="app">

  <div v-for="machine in machines">
  
    <div class="container-fluid machine-contents">
    
      <draggable :list="machine.jobs">
       
          <div v-for="(job, index) in machine.jobs" 
               v-bind:key="job.jobNumber"
               class="list-complete-item" 
          >
            <div>
              {{ job.jobNumber }}
            </div>
            <div>
              <br>
              <button v-on:click="removeJob(machine.id, job.jobNumber, machine.jobs, index)">Remove</button>
            </div> 
          </div>
 
      </draggable>
      
    </div>   
    
  </div>
  
</div>

CSS

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

.list-complete-enter, .list-complete-leave-active {
  /* opacity: .5; */
  background: #eee
}

JavaScript

var vm = new Vue({
    el: '#app',
    name: 'mfgActivity',
    data: {
    	machines: [
      	{
        	name: "H1",
          id: 1,
          jobs: [
          	{
            	jobNumber: "14037-12"
            },
            {
            	jobNumber: "14038-13"
            },
            {
            	jobNumber: "14048-15"
            }
          ]
        }
      ]
    },
    methods: {
  		removeJob: function(machineId, jobNumber, jobs, index) {
      	// Remove job from GUI
        jobs.splice(index, 1);
      }
    }
})