我正在尝试vuedraggable使用 Vuetify Cards 来实现，但由于某种原因，当卡片在单行中时拖放不起作用，但在它们位于列中时才起作用。
看看这个工作的 CodeSandbox。
在Parent.vue文件中，如果我移除<v-layout> </v-layout>包装<HelloWorld />组件，卡片会进入一列，并且拖放再次开始工作。
这是我的 HelloWorld 组件：-
<template>
<v-flex xs4>
<v-card class="mx-4">
<v-img :src="src"></v-img>
<v-card-title primary-title>
<div>{{title}}</div>
</v-card-title>
</v-card>
</v-flex>
</template>
<script>
export default {
name: "HelloWorld",
props: {
title: String,
src: String,
id: Number
},
data() {
return {};
}
};
</script>
这是我的父组件：-
<template>
<v-container>
<v-layout class="mt-5 align-center justify-center row fill-height">
<h2>Parent Component</h2>
</v-layout>
<draggable v-model="draggableCards">
<v-layout>
<template v-for="(tech,i) in getCardArray">
<HelloWorld :src="tech.src" :title="tech.title" :key="i"/>
</template>
</v-layout>
</draggable>
</v-container>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import HelloWorld from "./HelloWorld";
import draggable from "vuedraggable";
export default {
components: {
draggable,
HelloWorld
},
computed: {
...mapGetters({
getCardArray: "getCardArray"
}),
draggableCards: {
get() {
return this.$store.state.cardArray;
},
set(val) {
this.$store.commit("setCardArray", val);
}
}
},
methods: {
...mapMutations({
setCardArray: "setCardArray"
})
}
};
</script>
如果有人可以帮助我解决这个问题，我肯定会很感激。谢谢你。