在网格中围绕一定数量的元素包裹标签答案

【问题标题】：Wrap tag around a certain number of elements in grid在网格中围绕一定数量的元素包裹标签
【发布时间】：2021-11-13 22:58:29
【问题描述】：

所以目前我有这个功能，我有一个上传图片的组件，它占据了整个宽度。

但是当我点击它时，视图变成了一个有两列的网格视图，我的组件现在调整大小以填充第一行第一列，而上传的图像将占据其他空间（所以从第一行开始, 第二列 -- 然后是第二行、第一列等等。

所以我现在的问题是我希望我的图像是可拖动的，它被包裹在一个可拖动的标签中，但是我怎样才能做到这一点，但只为图像维护它呢？我的代码如下（我使用的是tailwindCSS和Vue btw）：

<div>
    <draggable v-model="images" v-bind="dragOptions" draggable=".item">
      <transition-group
        :class="
          images.length == 0 ? '' : 'grid sm:grid-cols-4 grid-cols-2 gap-4'
        "
      >
        <ImageUploader
          @addImage="addImage"
          ref="deleteRef"
          :key="'uploader'"
          :shouldShowLabel="images.length != 0"
          :class="images.length == 0 ? 'mt-4 flex-grow' : 'flex'"
        />
        <div
          v-for="image in images"
          :key="image.url"
          @click="deleteImage(image)"
          :class="'item'"
          class="cursor-pointer p-2 shadow-lg rounded-md "
        >
          <figure class="image overflow-hidden relative cursor-pointer">
            <img
              :src="image.url"
              :width="image.width"
              :height="image.height"
              alt=""
            />
          </figure>
        </div>
      </transition-group>
    </draggable>
  </div>

我有一些图片来说明：

上传前：

上传后：

所以事情是当我移动我的图像时，我的图像数组将有一个未定义的元素，我怀疑它来自 ImageUploader 组件。有什么办法可以把它拿出来让它不可拖动（所以图像数组不会被破坏？）。现在我正在使用不同的键使我的 ImageUploader 组件不可拖动，但是是的。

TLDR：我需要让我的视图看起来像一个有 2 列的网格，但我只希望将第一个元素之后的元素包裹在我的 vue 可拖动元素中，以便除了第一个元素之外可以拖动它们。

非常感谢！！

【问题讨论】：

标签： css vue.js draggable tailwind-css vuedraggable

【解决方案1】：

我不太确定你的意思。但据我了解，您不希望您的 <ImageUploader/> 组件可拖动？

尝试将其移出可拖动组件。 :)

<div>
 <ImageUploader
          @addImage="addImage"
          ref="deleteRef"
          :key="'uploader'"
          :shouldShowLabel="images.length != 0"
          :class="images.length == 0 ? 'mt-4 flex-grow' : 'flex'"
        />
    <draggable v-model="images" v-bind="dragOptions" draggable=".item">
      <transition-group
        :class="
          images.length == 0 ? '' : 'grid sm:grid-cols-4 grid-cols-2 gap-4'
        "
      >
        <div
          v-for="image in images"
          :key="image.url"
          @click="deleteImage(image)"
          :class="'item'"
          class="cursor-pointer p-2 shadow-lg rounded-md "
        >
          <figure class="image overflow-hidden relative cursor-pointer">
            <img
              :src="image.url"
              :width="image.width"
              :height="image.height"
              alt=""
            />
          </figure>
        </div>
      </transition-group>
    </draggable>
  </div>

【讨论】：