我正在尝试使用 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
列表中时,它并没有移动,我不知道为什么。我可以在此处提供的示例代码中使其工作,但当我将其更改为我自己的代码时则不行。