Geschachtelte Vue.Draggable-Liste bricht beim Ziehen über Kreuz

Question

Ich möchte eine ziehbare, verschachtelte Liste mit Vue haben und die Vue.Draggable-Komponente dafür verwendet. Ich bin jedoch mit dem Aktualisieren von geschachtelten Listen fest.

Das Rendering ist in Ordnung, das Ziehen ist in Ordnung, wenn Sie innerhalb des gleichen Levels bleiben. Aber Cross-Level ziehen scheint es nicht zu tun (Fehler 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> 

Jeder kann mich in die richtige Richtung lenken?

Answer 1

Es kann nicht das einzige Problem sein, aber Sie müssen die Liste prop oder verwenden v-Modell für die verschachtelte ziehbar Probieren Sie etwas wie setzen:

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