1

我正在尝试使用 Vue draggable 创建一个卡片生成器。我有一排满满的cardElements,这些可以拖到卡片生成器上。卡片生成器是一个由列表的各个“桶”组成的矩形。这是它的样子:

卡片生成器布局

这是script生成元素列表的方法:

import draggable from 'vuedraggable'

export default {
    name: "clone",
    display: "Clone",
    order: 2,
    components: {
        draggable
    },

    data() {
        return {
            cardElements: [
                { name: "Logo", id: 1 },
                { name: "Stamp", id: 2 }
            ],
            arrA: []
        };
    },
    methods: {
        log: function(evt) {
            window.console.log(evt);
        }
    }
};

您可以看到cardElements从脚本正确呈现,这就是它们在 HTML 中呈现的方式:

<draggable class="dragArea list-group" :list="cardElements" :group="{ name: 'people', pull: 'clone', put: false }" @change="log">
    <div class="list-group-item" v-for="element in cardElements" :key="element.name">
        {{ element.name }}
    </div>
</draggable>

这些是可拖动的,我可以像这样更改它们的顺序:

更改的项目顺序

卡片上的每个“桶”都被声明为一个数组,如下所示(这仅适用于卡片构建器的左上角,每个方格都是不同的数字):

data() {
    return {
        cardElements: [
            { name: "Logo", id: 1 },
            { name: "Stamp", id: 2 }
        ],
        arrA: []
    };
}
<draggable class="dragArea list-group" :list="arrA" group="cardItem" @change="log">
    <div class="lvl1-1 bucket empty" v-for="element in arrA" :key="element.name">
        {{ element.name }}
    </div>
</draggable>

但是当我将一个元素从cardElements列表拖到arrA列表中时,它并没有移动,我不知道为什么。我可以在此处提供的示例代码中使其工作,但当我将其更改为我自己的代码时则不行。

4

1 回答 1

0

问题是我将组定义为:group="{ name: 'people',然后调用它,group="cardItem"所以我更改:group="{ name: 'people',为这个:group="{ name: 'cardItem',并且它有效

于 2022-01-15T13:53:03.477 回答