Vue - Nested Draggable

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>


<div id="app">
  <div class="collection with-header">
      <draggable :list="blocks"
                  :group="options"
                  @move="beforeMove"
                  @end="onEnd">
         <vue-block  v-for="(block,idx) in blocks" :options="options"  :block="block" :key="idx">
           
         </vue-block>
      </draggable>
   </div>
</div>

CSS

#app {
  margin-top: 30px;
  position: relative;
}

.block {
  border: 1px solid gray;
  padding-left:20px;
  background-color: #FDEEDD
  /* position: absolute; */
}

JavaScript

// --------------------------------------------------------
// Vue Classes and Templates for Blocks

Vue.component('vue-block', {
  props: ["block","options"],
  template: `
  
  <div class="block">
			{{block.name}}
			<draggable :list="block.blocks"
    							:group="options"
      　　　　　　　class="dragArea"
                  @move="beforeMove"
                  @end="onEnd">
				 <vue-block  v-for="(blk,idx) in block.blocks" :block="blk" :key="idx"></vue-block>
      </draggable>
	</div>    
`,
	methods:{
    beforeMove: function(evt) {
      return true;
    },
    onEnd: function(evt) {
      console.log('moved',evt);
    }
  },
	
});

// ----------------------------------------------------------------
// Vue classes to render app 
new Vue({
  el: '#app',
  data: {
    blocks: [
    	{
      	id:1,
        name:"ITEM 1",
        blocks:[]
      },
    	{
      	id:2,
        name:"ITEM 2",
        blocks:[]
      },
    	{
      	id:3,
        name:"ITEM 3",
        blocks:[
        	{
          	id:31,
            name:"ITEM 3-1"
          },
          {
          	id:32,
            name:"ITEM 3-2"
          }
        ]
      }
    
    
    ]
    
  },
  methods:{
    beforeMove: function(evt) {
      return true;
    },
    onEnd: function(evt) {
      console.log('moved',evt);
    }
  },
  computed:{
  	options : function (){
    	return { 
      	name: 'block',
        pull: true, 
        put: true 
  		}
    }
  }
});