Javascript 使用卡实现可拖动的Vue？

我试图用Vuetify卡实现

vuedraggable

，但由于某些原因，当卡位于单行时，拖放不起作用，但当卡位于列时，拖放就起作用

看看这个工作

在

Parent.vue

文件中，如果我移除包装

组件的

，卡将进入一列，拖放操作将再次开始工作

这是我的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>

{{title}}
导出默认值{
名称：“HelloWorld”，
道具：{
标题：字符串，
src:String，
身份证号码
},
数据（）{
返回{}；
}
};

这是我的父组件：-

<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>

父组件
从“vuex”导入{mapGetters，mapTranslations}；
从“/HelloWorld”导入HelloWorld；
从“vuedraggable”导入可拖动；
导出默认值{
组成部分：{
拖拉的，
你好世界
},
计算：{
…地图绘制者({
getCardArray:“getCardArray”
}),
可拖动卡片：{
得到（）{
返回此。$store.state.cardArray；
},
设置（val）{
这是.store.commit（“setCardArray”，val）；
}
}
},
方法：{
…地图突变({
setCardArray:“setCardArray”
})
}
};

---

如果有人能帮我解决这个问题，我一定会很感激的。谢谢。

尝试将可拖动容器用作

v-layout

，例如：

<draggable tag="v-layout" v-model="draggableCards">

---

您可以检查代码，先生，您是个天才。我都快疯了。我希望我能不止一次地投这一票。非常感谢。快速提问，仅仅是使用v型布局会弄乱布局，如果我想用它传递多个像

行换行

，该怎么办？将

行换行

作为类添加到Dragable中如何？i、 先生，你是个正直的人，非常感谢