vue.dragable.for

by Clément Rigo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/sortable/1.4.2/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Dragable.For/v1.0.3/src/vuedragablefor.js"></script>
<script src="https://cdn.rawgit.com/David-Desmaisons/Vue.Dragable.For/9ad03c251651f16df210d52099cc703da41f257b/src/vuedragablefor.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css">
<div id="main">
  <draggable class="dragArea" :list="lists" :group="{ name: 'g1' }">
    <div class="p-4 bg-gray-200 mb-5" options='{"sort":false}' v-dragable-for="item in lists">
      <div class="p-2 bg-red-200 mb-3">
        {{ item.name }}      
      </div>


      <div class="border p-2">
        <div v-dragable-for="child in item.children" class="p-2 bg-green-200 mb-2">
          {{ child.name }}
        </div>
      </div>
    </div>
  </draggable>
</div>

JavaScript

var vm = new Vue({
	el: "#main",
	data: {
		lists: [
      	{
        	name: "Title 1",
          children: [
            {name: 'Children 1'},
            {name: 'Children 2'},
          ]
        },
        {
        	name: "Title 2",
          children: [
            {name: 'Children 3'},
            {name: 'Children 4'},
          ]
        }
      ]
   },
	methods:{
			add: function(){
				this.list.push({name:'Juan'});
			},
			replace: function(){
				this.list=[{name:'Edgard'}]
			}
		}
	});