Блог

Поэтому в настоящее время у меня есть эта функция, где у меня есть компонент, который загружает изображения, и он занимает всю ширину.

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

Итак, теперь моя проблема в том, что я хочу, чтобы мои изображения можно было перетаскивать, что обернуто в тег с возможностью перетаскивания, но как я могу это сделать, но сохранить его только для изображений? Мой код выглядит следующим образом (я использую, кстати, tailwindCSS и Vue):

 <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, чтобы их можно было перетаскивать, за исключением первого элемента.

Очень признателен!!

Я не совсем понимаю, что ты имеешь в виду. Но, насколько я понимаю, вы не хотите, чтобы ваш <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>