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

Question

I'm trying to create a gallery where users can reorder images. For now, I work just with an array of numbers to see if this approach works.

I need it responsive - on mobile - it should be only one column.

The problem is that vue-draggable seems to work only on one column form me.

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

Do you know what to do to be able to reorder cards by dragging them?

Answer 1

I think you want to make the columns draggable within the 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>

Demo: https://codeply.com/p/X2vvAcaSTb