Vue Draggable - CDN Custom

by diondavid

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.9.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/15.0.0/vuedraggable.min.js"></script>
<script type="text/x-template" id="template-nested">
   <draggable :element="'ul'" :list="tasks" class="dragArea" :options="{group:{ name:'g1'}}" > 
			<li v-for="el in tasks" :key="el.name">
         <p>{{el.name}}</p>
         <nested-draggable :tasks="el.tasks"></nested-draggable>
			  </li>
	</draggable>
</script>



<div id="app">
  <nested-draggable :tasks="tasks"/>
</div>

JavaScript

var nested = {
  template: '#template-nested',
  name: 'nested-draggable',
  props: ['tasks']
};

var app = new Vue({
  el: "#app",
  components: {
        "nested-draggable" : nested
  },
  data: {
  "tasks": [
    {
      "name": "task 1",
       "tasks": [
         {
           "name": "task 1 - sub task 1",
           "tasks": []
         }
       ]
    },
    {
      "name": "task 2",
      "tasks": [
         {
           "name": "task 2 - sub task 1",
           "tasks": []
         }
       ]
    },
    {
      "name": "task 3 - no children for now, but might have in the future",
			"tasks": [
       ]
    }
  ]
  },
});