javascript - VueJS/Vuetify - 可拖动的响应式卡片网格 - 不起作用
问题描述
我正在尝试创建一个用户可以重新排序图像的画廊。目前,我只使用一组数字来查看这种方法是否有效。
我需要它响应 - 在移动设备上 - 它应该只有一列。
问题是这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>
您知道如何通过拖动卡片来重新排序卡片吗?
解决方案
我想你想让列在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>
推荐阅读
- c++ - 'std::string*& {aka std::basic_string 类型的非常量引用的初始化无效
*&}' 来自 'std::string* {aka - database - 我想听听关于在这个项目中使用时间序列数据库的想法:
- javascript - 配置 webpack 以将 _ 解析为 lodash 索引
- ruby-on-rails - 如何将两个不同模型的 ID 传递给一个新模型?
- python - 引用满足特定条件的 np.array 元素的最快方法
- php - 高级自定义字段 update_value 未触发
- mlt - mlt: why is dynamictext working, but not text or qtext?
- gpu - 如何不并行化 OpenACC 中的内部循环
- dialogflow-es - 使用多个 DialogFlow 的 Webhook 查询 Google Cloud 外部的 API 端点
- javascript - Socket.io - 有人可以冒充另一个套接字 id 吗?