Javascript VueJs/Vuetify/VueDraggable-如何使VListGroup项可拖动？

使用Vuetify和VueDraggable，我试图使VListGroup下的项目可以拖动

关于代码，我想做的是从到（组中的atm列表项在此代码笔中不可拖动）

不含VlistGroup： 模板 与VListGroup 模板 我的问题是，我似乎无法将VListGroup的activator插槽与VueDraggable的组件数据属性一起使用

你知道我怎样才能做到吗

---

谢谢。

我不太明白你的问题。这把小提琴对你有用吗？我不太明白你的问题。这把小提琴适合你吗？

<draggable v-model="controls"
           :group="draggable.group"
           :sort="false"
           tag="v-list"
           :component-data="draggable.componentData">
    <v-list-item v-for="(control, index) in controls"
                 :key="index"
                 link>
      <v-list-item-title v-text="control.name"></v-list-item-title>
      <v-list-item-icon>
        <v-icon v-text="control.icon"></v-icon>
      </v-list-item-icon>
    </v-list-item>
</draggable>

data: () => ({
  draggable: {
    group: {
      name: 'formbuilder',
      pull: 'clone',
      put: 'false',
    },
    componentData: {
      props: {
        dense: true,
      },
    },
  },
  controls: [
    { name: 'Row', icon: 'mdi-table-row' },
    { name: 'Column', icon: 'mdi-table-column' },
    { name: 'Text', icon: 'mdi-text-short' },
    { name: 'Text area', icon: 'mdi-text-subject' },
    { name: 'Select', icon: 'mdi-filter-variant' },
    { name: 'Checkbox & switch', icon: 'mdi-checkbox-marked' },
    { name: 'Radio group', icon: 'mdi-radiobox-marked' },
  ],
}),

<v-list dense
        expand>
  <v-list-group v-for="(group, index) in controlsGroups"
                :prepend-icon="group.icon"
                no-action>
    <template v-slot:activator>
      <v-list-item-title v-text="group.name"></v-list-item-title>
    </template>
    <v-list-item v-for="(control, index) in group.controls"
                 :key="index"
                 link>
      <v-list-item-title v-text="control.name"></v-list-item-title>
      <v-list-item-icon>
        <v-icon v-text="control.icon"></v-icon>
      </v-list-item-icon>
  </v-list-group>
</v-list>

data: () => ({
  controlsGroups: [
    {
      name: 'Layouts',
      icon: 'mdi-view-dashboard',
      controls: [
        { name: 'Row', icon: 'mdi-table-row' },
        { name: 'Column', icon: 'mdi-table-column' }
      ],
    },
    {
      name: 'inputs',
      icon: 'mdi-textbox',
      controls: [
        { name: 'Text', icon: 'mdi-text-short' },
        { name: 'Text area', icon: 'mdi-text-subject' },
        { name: 'Select', icon: 'mdi-filter-variant' },
        { name: 'Checkbox & switch', icon: 'mdi-checkbox-marked' },
        { name: 'Radio group', icon: 'mdi-radiobox-marked' },
      ],
    },
  ],
}),