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>

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>

任何人都可以指引我朝着正确的方向前进吗？

Answer 1

这可能不是唯一的问题，但您需要设置列表道具或使用嵌入式可拖动的v模型尝试类似：

拖动跨级别时嵌套的Vue.Draggable列表中断

1 个答案: