vue.dragable.for

by spitfire378

HTML

<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.Draggable/master/dist/vuedraggable.min.js"></script>
<div id="app">
  <draggable v-model="elements.hierarchies">
    <div v-for="hierarchy in elements.hierarchies" class="group">
      <h2>{{ hierarchy.name }}</h2>
      <draggable v-model="hierarchy.items">
        <ul v-for="item in hierarchy.items" >
          <li>{{ item.name }}</li>
        </ul>
      </draggable>
      <draggable v-model="hierarchy.childrens">
        <div v-for="hierarchyChildren in hierarchy.childrens" class="group">
          <h3>{{ hierarchyChildren.name }}</h3>
          <draggable v-model="hierarchyChildren.items">
            <ul v-for="item in hierarchyChildren.items">
              <li>{{ item.name }}</li>
            </ul
          </draggable>
        </div>        
      </draggable>
    </div>
  </draggable>
  <pre>{{ elements }}</pre>
</div>

CSS

.group {
  margin-left: 30px;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
		elements: {
    	hierarchies: [
	      {
        	name: 'hierarchy #1',
          childrens: [
          	{
	          	name: 'hierarchy #1.1',
              items: [
              	{
                	name: 'child #1.1'
                }
              ]
            }
          ],
  				items: [
          	{
            	name: 'child #1'
              
            },
            {
            	name: 'child #2'
            }
          ]        
        },
        {
        	name: 'hierarchy #2',
          childrens: [
          	{
	          	name: 'hierarchy #2.1',
              items: [
              	{
                	name: 'child #2.1'
                }
              ]
            }
          ],
  				items: [
          	{
            	name: 'child #3'
              
            },
            {
            	name: 'child #4'
            }
          ]        
        }
      ]
    }
  }
})