Vue3+vuedraggable+Tailwind拖拽元素不遵循网格及父容器适配问题

核心修改点 #

1. 配置跨区域拖拽组 #

给三个<draggable>组件设置相同的group属性，让它们属于同一拖拽分组，支持元素在三个区域间自由拖拽：

<draggable group="equipment" ...>

2. 修复网格布局与溢出问题 #

移除多余的嵌套容器，直接给<draggable>添加Tailwind布局类，让元素横向排列并自动适配容器空间，避免溢出：

• 固定8列布局：使用grid grid-cols-8 gap-2
• 自适应列数（根据容器宽度自动换行）：使用flex flex-wrap gap-2
• 添加min-h-[100px] overflow-y-auto确保容器有最小高度，内容过多时可滚动

修改后的完整代码 #

<template>
  <div v-if="mounted">
    <div class="grid grid-rows-3 gap-4">
      <!-- 第一个区域：军队装备 -->
      <div>
        <PageSubHeader>Army Equipment</PageSubHeader>
        <draggable 
          class="bg-zinc-800 p-2 min-h-[100px] grid grid-cols-8 gap-2 overflow-y-auto"
          :list="selection.army" 
          item-key="id"
          group="equipment"
        >
          <template #item="{ element }">
            <EquipmentTile :item="element" class="w-full h-full"/>
          </template>
        </draggable>
      </div>

      <!-- 第二个区域：城市存储装备 -->
      <div>
        <PageSubHeader>Equipment stored in the city</PageSubHeader>
        <draggable 
          class="bg-zinc-800 p-2 min-h-[100px] grid grid-cols-8 gap-2 overflow-y-auto"
          :list="selection.city" 
          item-key="id"
          group="equipment"
        >
          <template #item="{ element }">
            <EquipmentTile :item="element" class="w-full h-full"/>
          </template>
        </draggable>
      </div>

      <!-- 第三个区域：待出售装备 -->
      <div>
        <PageSubHeader>Equipment to be sold</PageSubHeader>
        <draggable 
          class="bg-zinc-800 p-2 min-h-[100px] grid grid-cols-8 gap-2 overflow-y-auto"
          :list="selection.sell" 
          item-key="id"
          group="equipment"
        >
          <template #item="{ element }">
            <EquipmentTile :item="element" class="w-full h-full"/>
          </template>
        </draggable>
      </div>
    </div>
    <div class="w-full bg-green-700 opacity-80 rounded-b-sm px-4 py-2 mt-4">
      Submit
    </div>
  </div>
</template>

额外注意事项 #

• 确保EquipmentTile组件内部没有设置固定宽度，使用w-full h-full填充父容器的网格单元格
• 如果需要自适应列数（而非固定8列），将draggable的grid grid-cols-8替换为flex flex-wrap，并给EquipmentTile设置w-1/8（保持8列宽度）或flex-[0_0_calc(12.5%-0.5rem)]（考虑gap的宽度）
• 若要让父容器完全自适应页面剩余空间，可给最外层的grid grid-rows-3添加h-[calc(100vh-80px)]（根据实际头部高度调整数值），确保三个区域平分页面高度

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