I am working with Vue.Draggable
and I am trying to create a mechanism that enables drag and drop functionality among different groups of items. My groups of items consist of several md-list-item
components that are mappable and draggable.
My dilemma is that I can easily drag and drop items into empty groups. However, the same is not applicable for the non-empty groups. Here is my code and demo:
<template>
<div>
<md-toolbar class="md-primary">
<h1 class="md-title">Vue Material</h1>
</md-toolbar>
<md-content>
<md-list>
<draggable :list="grouped" group="group">
<md-list-item v-for="item in grouped" :key="item.id" md-expand>
<md-list-item-content>
<span>{{ item.name }}</span>
</md-list-item-content>
<md-list slot="md-expand">
<draggable :list="item.children" group="item">
<md-list-item v-for="child in item.children" :key="child.id">
<md-list-item-content>
<span>{{ child.name }}</span>
</md-list-item-content>
</md-list-item>
</draggable>
</md-list>
</md-list-item>
<draggable :list="unGrouped" group="item">
<md-list-item v-for="item in unGrouped" :key="item.id">
<md-list-item-content>
<span>{{ item.name }}</span>
</md-list-item-content>
</md-list-item>
</draggable>
</draggable>
</md-list>
</md-content>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'App',
components: {
draggable
},
data: () => ({
grouped: [
{id: 1, name: 'Empty group', children: []},
{
id: 2,
name: 'Non-empty group',
children: [
{id: 5, name: 5},
{id: 6, name: 6}
]
}
],
unGrouped: [
{id: 3, name: 3},
{id: 4, name: 4}
]
})
}
</script>
<style lang="scss"></style>
Any advice or solutions would be greatly appreciated.