Vue Draggable-如何从单独的vue文件上的一个列表拖动到另一个单独的vue文件上的另一个列表

Question

我试图将一个vue文件中的项目列表拖到另一个vue文件中。这两个文件都通过vue路由器在页面上打开。我只能在同一列表中移动项目，但无法从一个列表中传递它们以克隆到另一个列表中。这是我的一个文件代码：

<template>
    <v-card height="100%">
        <v-card-title>Drag & Drop</v-card-title>
        <v-card-text>
            <v-layout>
                <v-expansion-panels
                        popout
                >
                    <v-expansion-panel
                           v-for="draggableItem in draggableList"
                           :key="draggableItem.name"
                    >
                        <v-expansion-panel-header>{{ draggableItem.title }}</v-expansion-panel-header>
                        <draggable
                                :list="draggableItem.options"
                                :group="{ name: draggableItem.name + ' options', pull: 'clone', put: false }"
                        >
                            <v-expansion-panel-content
                                    v-for="option in draggableItem.options"
                                    :key="option.name"
                            >
                                {{ option.title }}
                            </v-expansion-panel-content>
                        </draggable>
                    </v-expansion-panel>
                </v-expansion-panels>
            </v-layout>
        </v-card-text>
    </v-card>
</template>

<script>
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable,
        },
        data() {
            return {
                draggableList: [
                    {
                        name: "collections",
                        title: "Collections",
                        options: [
                            {
                                name: "profile",
                                title: "Profile"
                            },
                            {
                                name: "event",
                                title: "Event"
                            },
                            {
                                name: "attribute",
                                title: "Attribute"
                            },
                        ],
                    },
                ]
            }
        },
    }

这是另一个文件：

<template>
    <v-card>
        <v-card-title>Drop here</v-card-title>
        <v-card-text>
            <draggable
                    :list="canvas"
                    group="collections"
            >
                <v-flex
                        v-for="item in canvas"
                        :key="item.name"
                >
                    {{ item.title }}
                </v-flex>
            </draggable>
        </v-card-text>
    </v-card>
</template>

<script>
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable,
        },
        data() {
            return {
                canvas: [
                    {
                        name: "profile",
                        title: "Profile"
                    },
                ]
            }
        }
    }
</script>

我实际上只需要能够将从一个列表中拖动的项目克隆到另一个列表中。

谢谢！

Answer 1

您可以构建一个简单的“桥”，以使用vuex将文件或组件的元素传递到另一个组件，您可以查阅vuex https://vuex.vuejs.org/的官方文档