Vue.Draggable tree

by kabanoki

HTML

<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
<ul id="app">
 <draggable :options="{group:'ITEMS'}">
   <li v-for="item, index in items" :key="item.no">
   {{item.name}}-(No.{{item.no}})
     <ul class="child">
     <draggable :options="{group:'ITEMS2'}">
       <li v-for="item2, index2 in items" :key="'child' + item.no + '-' + item2.no">{{item2.name}}-(No.{{item2.no+ '-' + item2.no}})</li>
     </draggable>
     </ul>
   </li>
 </draggable>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

#app {
  padding : 15px;
}
ul {
  z-index: 1;
}
li {
  cursor:pointer;
  padding: 10px;
  border: solid #ddd 1px;
 background-color: #fff; 
}
ul.child {
 padding: 100px;
 background-color: #f00;
 z-index: 100;
}

Vue

new Vue({
  el: "#app",
  data: {
    items:[
      {no:1, name:'キャベツ', categoryNo:'1'},
      {no:2, name:'ステーキ', categoryNo:'2'},
      {no:3, name:'リンゴ', categoryNo:'3'}
    ]
  }
});