使用vue.draggable.next实现Quasar q-card水平拖拽布局堆叠问题排查

你的代码存在两个核心问题，导致卡片无法实现水平排列：

1. Draggable 容器缺少横向布局规则 #

vue.draggable.next 生成的默认容器是块级元素，即便设置了 direction="horizontal"，也需要给容器添加横向布局样式，才能让子卡片水平排列。

2. item-key 属性与数据结构不匹配 #

你的 items 数组元素没有 id 属性，但你设置了 item-key="id"，这会导致组件无法正确识别每个项，虽不直接影响布局，但会引发潜在的渲染问题。

修复后的完整代码 #

<template>
  <draggable
    v-model="items"
    group="items"
    direction="horizontal"
    item-key="name" <!-- 改用已存在的name属性作为唯一标识，也可以给每个item添加id -->
    @start="drag = true"
    @end="drag = false"
    class="draggable-container" <!-- 添加自定义容器类 -->
  >
    <template #item="{ element }">
      <q-card class="card">
        <q-img src="~assets/temp/bb-auto.png" :alt="`Image ${element.name}`">
          <div class="absolute-bottom text-subtitle2 text-center">
            Image {{ element.name }}
          </div>
        </q-img>
      </q-card>
    </template>
  </draggable>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import draggable from 'vuedraggable';

const drag = ref(false);

const items = ref([
  { name: 'item1', id: 1 }, // 可选：添加id属性，对应item-key="id"
  { name: 'item2', id: 2 },
  { name: 'item3', id: 3 },
  { name: 'item4', id: 4 },
  { name: 'item5', id: 5 },
]);
</script>

<style scoped>
.draggable-container {
  display: flex; /* 核心：让容器内元素水平排列 */
  gap: 16px; /* 可选：设置卡片之间的间距 */
  overflow-x: auto; /* 可选：卡片过多时显示横向滚动条 */
  padding: 10px 0;
}

.card {
  max-height: 200px;
  max-width: 200px;
  flex-shrink: 0; /* 防止卡片被挤压变形 */
}
</style>

关键修改说明 #

• 给 draggable 组件添加 draggable-container 类，通过 display: flex 实现横向布局，gap 控制卡片间距，overflow-x: auto 处理溢出场景。
• 调整卡片样式：添加 flex-shrink: 0 避免卡片在空间不足时被压缩，移除不必要的 display: flex（q-card 本身已自带合适布局）。
• 修正 item-key：要么给每个 item 添加 id 属性，要么直接使用已存在的 name 属性作为唯一标识。

内容的提问来源于stack exchange，提问作者djneely