代码之家  ›  专栏  ›  技术社区  ›  Paul

Vue.Draggable不允许我在列表之间移动项目

  •  1
  • Paul  · 技术社区  · 6 年前

    试图跟随 this tutorial ,但在容器之间进行双向拖动。将问题减少到最小的代码集,我能够在列表中排序,但不能在列表之间排序。我从文档中得到的印象是,将两个draggable设置为相同的组名可以启用它,但事实似乎并非如此。

    那么,我需要做什么才能让项目从一个列表移动到另一个列表?下面是我尝试过的代码(同样,它非常适合在同一个列表中重新排列)

    <template>
    <v-container fill-height fluid grid-list-md mt-0 class='about'>
        <v-layout column fill-height>
          <h1>This is an about page</h1>
          <v-layout row fill-height>
            <v-flex xs4>
              <draggable class='dragArea' v-model='peopleList'>
                <div v-for='person in peopleList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
              </draggable>
            </v-flex>
            <v-flex xs4>
              <draggable class='dragArea' v-model='employeeList'>
                <div v-for='person in employeeList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
              </draggable>
            </v-flex>
          </v-layout>
        </v-layout>
    </v-container>
    </template>
    <script>
    import draggable from 'vuedraggable'
    export default {
      name: 'About',
      data () {
        return {
          employees: [{ id: 6, name: 'Pete' },
            { id: 7, name: 'Pat' }],
          people: [
            { id: 1, name: 'Bob' },
            { id: 2, name: 'Mary' },
            { id: 3, name: 'Jane' },
            { id: 4, name: 'Alex' },
            { id: 5, name: 'Jim' }
          ]
        }
      },
      components: { draggable },
      computed: {
        employeeList: {
          get () {
            return this.employees
          },
          set (value) {
            this.employees = value
          }
        },
        peopleList: {
          get () {
            return this.people
          },
          set (value) {
            this.people = value
          }
        }
      }
    }
    </script>
    <style>
    div.dragArea {
      border: 1px solid black;
      min-width: 100px;
    }
    </style>
    
    1 回复  |  直到 6 年前
        1
  •  10
  •   Sumurai8    6 年前

    这个 options 参数应用于 draggable 组件,而不是该元素的子元素。如果你加上 拖动 正如你所期望的那样。

    <draggable class='dragArea' v-model='peopleList' :options='{group: "people"}'>
      <div v-for='person in peopleList' :key='person.id'>{{ person.name }}</div>
    </draggable>
    
        2
  •  5
  •   Mariusz Jamro    5 年前

    group="<name>" 现在属性:

        <draggable class="dragArea" v-model="peopleList" group="people">
          <div v-for="person in peopleList" :key="person.id">{{ person.name }}</div>
        </draggable>