Vue

by arnoson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/15.0.0/vuedraggable.min.js"></script>
<div id="app">
  <draggable
    :list="layers"
    :group="{ name: 'layers' }"
    @start="start"
    @end="end"
  >
    <div
      v-for="layer of layers"
      :key="layer.id"
    >
     {{ layer.name }}
     <nested-draggable v-if="layer.children" :list="layer.children" />
    </div>
  </draggable>
</div>

CSS

#app {
  padding: 1em;
}

.sortable-ghost {
  height: 1px;
  overflow: hidden;
  background: black;
  margin-top: -1px;
}

Vue

new Vue({
  el: "#app",
  data: {
    layers: [
    	{
      	id: 1,
        name: 'Layer 1',
        children: [
           {
            id: 5,
            name: 'Layer 5'
          },
          {
            id: 6,
            name: 'Layer 6'
          },
          {
            id: 7,
            name: 'Layer 7'
          },
          {
            id: 8,
            name: 'Layer 8'
          } 
        ]
      },
    	{
      	id: 2,
        name: 'Layer 2'
      },
    	{
      	id: 3,
        name: 'Layer 3'
      },
    	{
      	id: 4,
        name: 'Layer 4'
      }      
    ]
  },
  
  methods: {
  	start(event) {
    	// Make a clone of the choosen item and add it to the
      // layers list.
    	const index = event.oldIndex
    	const item = this.layers[index]
    	this.layers.splice(index + 1, 0, {
      	...item,
        // Vue requires unique keys.
        id: item.id + '_clone',
        // Set a isClone flag to be able to delete the clone
        // afterwards.
        isClone: true
      })
    },
    
    end(event) {
    	// Delete the clone from the layers.
    	this.layers = this.layers.filter(layer => !layer.isClone)
    }
  }
})