크로스 레벨 드래그 할 때 중첩 된 Vue.Draggable 목록이 깨집니다.

Question

Vue에서 드래그 가능한 중첩 목록을 가져오고 Vue.Draggable 구성 요소를 사용했습니다. 그러나 중첩 된 목록을 업데이트하는 데 어려움이 있습니다.

렌더링이 괜찮 으면 같은 레벨 안에있을 때 드래그하는 것이 좋습니다. 하지만 교차 레벨을 드래그하는 것으로는 보이지 않습니다 (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> 

뷰 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> 

사람은 올바른 방향으로 날 직접 할 수 있습니까?

Answer 1

그것은 유일한 문제가되지 않을 수 있지만 같은 시도 목록 소품을 설정하거나 중첩 드래그 를위한 V-모델을 사용해야합니다 그것 뿐이다

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