VueJs / Vuetify / VueDraggable - Как сделать элементы VListGroup перетаскиваемыми? - PullRequest
Новая
       97

VueJs / Vuetify / VueDraggable - Как сделать элементы VListGroup перетаскиваемыми?

1 голос
/ 21 января 2020

Используя Vuetify и VueDraggable, я пытаюсь сделать элементы из VListGroup перетаскиваемыми.

О коде, что я хочу сделать, это перейти от здесь к там (элементы списка банкоматов в группах не перетаскиваются в этом коде).

Без VListGroups:

Шаблон 

<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' },
  ],
}),

С VListGroup

Шаблон 

<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' },
      ],
    },
  ],
}),

Моя проблема в том, что мне кажется, что я не могу использовать слот активатора VListGroup с опора компонента-данных VueDraggable ...

Есть идеи, как мне этого добиться?

Спасибо.

...