Nested Vue.Draggable list breaks when dragging cross-level

Question

I want to have a draggable, nested list with Vue and used the Vue.Draggable component for it. I'm however stuck with updating nested lists.

The rendering is fine, the dragging is fine when you stay inside the same level. But dragging cross-level doesn't seem to do it (error in VueComponent.onDragStart).

html

<template>
  <div class="fluid container">

    <div  class="col-md-6">
        <draggable class="list-group" element="ul" v-model="list" :options="dragOptions" :move="onMove" @start="isDragging=true" @end="isDragging=false"> 
          <transition-group type="transition" :name="'flip-list'">
            <li class="list-group-item" v-for="element in list" :key="element.order"> 

              <i :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'" @click=" element.fixed=! element.fixed" aria-hidden="true"></i>
              {{element.name}}
              <span class="badge">{{element.order}}</span>

              <draggable v-if="element.notes" class="list-group" element="ul" :options="dragOptions" :move="onMove">
                 <transition-group class="list-group" :name="'flip-list'">
                   <li class="list-group-item" v-for="elementDeep in element.notes" :key="elementDeep.order"> 
                      {{elementDeep.name}} <span class="badge">{{ elementDeep.order }}</span>
                  </li>
                </transition-group>
              </draggable>

            </li> 
          </transition-group>
      </draggable>
    </div>

    <div  class="list-group col-md-6">
      <pre>{{listString}}</pre>
    </div>

  </div>
</template>

Vue js

<script>
import draggable from 'vuedraggable'

var folderOneReady = [  
   {  
      "name":"LOREM IPSUM",
      "order":1,
      "fixed":false
   },
   {  
      "name":"MAGNA ALIQUA",
      "order":2,
      "fixed":false
   },
    {
      "name": "DOLOREM LAUDANTIUM",
      "notes": [
         {
           "name": "Note level deep One",
            "order":31,
            "fixed":false
         },
          {
           "name": "Note level deep two",
            "order":32,
            "fixed":false
         },
         {
           "name": "Note level deep deep three",
            "order":33,
            "fixed":false
         }
       ],
       "order":3,
       "fixed":false
    },
   {  
      "name":"SIT AMET",
      "order":4,
      "fixed":false
   },
   {  
      "name":"NEMO",
      "order":5,
      "fixed":false
   },
   {  
      "name":"ACCUSANTIUM",
      "order":6,
      "fixed":false
   },
   {  
      "name":"ESSE",
      "order":7,
      "fixed":false
   },
   {  
      "name":"DOLORES",
      "order":8,
      "fixed":false
   }
];

export default {
  name: 'hello',
  components: {
    draggable,
  },
  data () {
    return {
      list: folderOneReady,
      editable:true,
      isDragging: false,
      delayedDragging:false
    }
  },
  methods:{
    onMove ({relatedContext, draggedContext}) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed;
    }
  },
  computed: {
    dragOptions () {
      return  {
        animation: 1,
        group: 'description',
        disabled: !this.editable,
        ghostClass: 'ghost'
      };
    },
    listString(){
      return JSON.stringify(this.list, null, 2);  
    }
  },
  watch: {
    isDragging (newValue) {
      if (newValue){
        this.delayedDragging= true
        return
      }
      this.$nextTick( () =>{
           this.delayedDragging =false
      })
    }
  }
}
</script>

Anyone can direct me in the right direction?

Answer 1

It may not be the only problem but you need to set the list prop or use v-model for the nested draggable Try something like:

<draggable v-if="element.notes" class="list-group" element="ul" :options="dragOptions" :move="onMove" :list="element.notes">