Question

所以我有三个Vue.Draggable容器。一个可以容纳一组卡片，然后可以将其拖入两个容器中的一个。可以在两个容器之间拖动任何一个接收容器中的物品。

但是我遇到了一个问题，我只能在一张空的卡中将一张卡放入两个接收容器中。一旦其中一个接收容器包含一张卡片，我就无法通过从第一个容器中拖动一张卡片来向该容器中添加任何其他东西。通过将卡移动到一个空容器中，然后再将其移动到非空容器中，我可以将任意数量的卡移动到一个接收容器中，但是显然这种行为是不可取的。

我也正在使用Vuetify，这是完全相关的。这是第一个容器的代码

          <draggable
            :clone="cloneMinion"
            :group="{ name: 'cards', pull: 'clone', put: false }"
            :sort="false"
            class="justify-center row"
            v-model="filteredCards"
          >
            <v-col
              v-for="(card, index) in filteredCards"
              :key="`card_${index}`"
              class="flex-grow-0 flex-shrink-1"
            >
              <v-img
                :src="card.src"
                max-width="225"
              />
            </v-col>
          </draggable>

以及接收容器的代码

  <draggable
    :group="{ name: 'minions', pull: true, put: ['cards', 'minions'] }"
    :options="{ direction: 'horizontal' }"
    class="battlefield-side justify-center row"
    v-bind="{ animation: 150 }"
    v-model="minions"
  >
    <v-col
      v-for="minion in minions"
      :key="`minion_${minion.id}`"
      class="flex-grow-0 flex-shrink-1 pa-0"
    >
      <v-img
        :src="minion.src"
        contain
        height="275"
      />
    </v-col>
  </draggable>

我觉得我只是错过了文档中的一些选项或道具，但是我已经看了很多遍了，似乎找不到任何相关的东西。

Vue.draggable列表仅接受一项

0 个答案: