为什么 vue 可拖动项不会在列表之间移动？

Question

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

Card builder Layout

这是生成元素列表的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>

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

Changed Order of items

卡片上的每个“桶”都被声明为这样的数组（这仅适用于卡片构建器的左上角，每个方格都是不同的数字）：

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 列表时，它不会移动，我不知道为什么。我可以在here 提供的示例代码中让它工作，但当我将它更改为我自己的代码时就不行了。

Answer 1

问题是我将组定义为:group="{ name: 'people',，然后将其称为group="cardItem"，所以我将:group="{ name: 'people', 更改为:group="{ name: 'cardItem',，它工作了