Реализация Vue перетаскивания с картами? - PullRequest
Новая
       99

Реализация Vue перетаскивания с картами?

2 голосов
/ 05 мая 2020

Я пытаюсь реализовать vuedraggable с картами Vuetify, но по какой-то причине перетаскивание не работает, когда карты находятся в одной строке, но работает, когда они находятся в столбце.

Проверьте этот рабочий CodeSandbox .

В файле Parent.vue, если я удалю <v-layout> </v-layout>, обертывающий компонент <HelloWorld />, карты go в столбец, и перетаскивание снова начнет работать.

Это мой компонент 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>

Если кто-то может помочь мне разобраться в этом, я обязательно ценить это. Спасибо.

1 Ответ

2 голосов
/ 05 мая 2020

Попробуйте использовать перетаскиваемый контейнер как v-layout, например: 

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

Вы можете проверить код здесь

...