vue-draggable

by Steve

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
<div id="app">
  <h1>Tasks</h1>
  <div class="container">
    <ul class="collection with-header">
      <draggable :list="tasks.somstuff"
      　　　　　　　class="dragArea"
                  :move="beforeMove"
                  @end="onEnd">
        <li v-for="task in tasks" class="collection-item">
          {{task.name}}
        </li>
      </draggable>
    </ul>
    <button @click="add" class="waves-effect waves-light btn">Add</button>
    <button @click="replace" class="waves-effect waves-light btn deep-orange lighten-2">Replace</button>
  </div>
</div>

Vue

Vue.component('greeting', {
  template: '<h1>Welcome to coligo!</h1>'
});

var app = new Vue({
  el: "#app",
  data: {
    tasks:{
      somstuff: [
      	{name:"Meeting"}, 
        {name:"Create a document"}, 
        {name:"Appointment"}
      ]
    }
  },
  methods:{
    add: function() {
      this.tasks.push({name:'Juan'});
    },
    replace: function() {
      this.tasks = [{name:'Edgard'}]
    },
    beforeMove: function(evt) {
      return evt.draggedContext.element.name !== 'Meeting';
    },
    onEnd: function(evt) {
      console.log(evt);
      alert('Moved!!');
    }
  }
});