VueJS/Vuetify - 可拖动的响应式卡片网格 - 不起作用

Question

我正在尝试创建一个画廊，用户可以在其中重新排列图像。现在，我只使用一组数字来查看这种方法是否有效。

我需要响应式 - 在移动设备上 - 它应该只有一栏。

问题是 vue-draggable 似乎只适用于我的一栏。

<template>
    <div>
        <v-row>
            <v-col cols="4" :key="image" v-for="image in images">
                <draggable>
                    <v-card>
                        <v-card-text>[[ image ]]</v-card-text>
                    </v-card>
                </draggable>
            </v-col>
        </v-row>
    </div>
</template>

你知道如何通过拖动来重新排序卡片吗？

Answer 1

我想你想让列在 row...

中可拖动

    <draggable class="row" v-model="items" :sort="true">
        <v-col cols="4" :key="image" v-for="image in items">
            <v-card>
                <v-card-text>
                    <v-img :src="image" />
                </v-card-text>
            </v-card>
        </v-col>
    </draggable>

演示：https://codeply.com/p/X2vvAcaSTb

VueJS/Vuetify - 可拖动的响应式卡片网格 - 不起作用

VueJS/Vuetify - draggable responsive grid of cards - doesn't work

javascript

vue.js

vuetify.js

vuedraggable