VueJS / Vuetify - перетаскиваемая адаптивная сетка карт - не работает - PullRequest
Новая
       77

VueJS / Vuetify - перетаскиваемая адаптивная сетка карт - не работает

0 голосов
/ 27 апреля 2020

Я пытаюсь создать галерею, где пользователи могут изменять порядок изображений. Сейчас я работаю только с массивом чисел, чтобы посмотреть, работает ли этот подход.

Мне нужно, чтобы он был отзывчивым - на мобильном телефоне - это должен быть только один столбец.

Проблема в том, что 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>

Знаете ли вы, что нужно сделать, чтобы изменить порядок карточек, перетаскивая их?

1 Ответ

1 голос
/ 27 апреля 2020

Я думаю, вы хотите сделать перетаскиваемые столбцы в 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

...