Перетащите элемент в другой div и автоматически расположите так, чтобы оба div были сбалансированы - PullRequest
Новая
       19

Перетащите элемент в другой div и автоматически расположите так, чтобы оба div были сбалансированы

0 голосов
/ 26 марта 2020

Я пытаюсь реализовать это в своем веб-приложении, основываясь на моих исследованиях "vue -draggable", который позволит перетаскивать из одного div в другой (верхний и нижний div). Но я пытаюсь реализовать перетаскивание с автоматическим упорядочением, чтобы два div были сбалансированы, как показано на рисунке ниже.

примечание: это приложение ios (я думаю, что перетаскивание реализовано с помощью UICollectionView)

можно перетаскивать из другого div и переставлять оба div

вот так выглядит мой верхний и нижний div 

       <div class="wrapper">
          <div class="first_row">
            <template v-for="remocon in firstRow.models">
              <div
                @click="openDialog(remocon, $event)"
                class="sh-card_off"
                v-bind:key="remocon.id + '_sh-card_off'"
              >
                <div class="card-top" v-bind:key="remocon.id + '_card-top'">
                  <div class="card-left" v-bind:key="remocon.id + '_card-left'">
                    <component
                      v-bind:is="remocon.appProductIcon"
                      width="30px"
                      alt="SPOT"
                      v-bind:key="remocon.id + '_appProductIcon'"
                    ></component>
                  </div>
                  <div
                    v-if="!remocon.has_battery"
                    class="card-right_off"
                    v-bind:key="remocon.id + '_card-right_off'"
                  >
                    <br />
                    {{ remocon.battery }}
                  </div>
                  <div
                    v-if="remocon.has_battery"
                    class="card-right-gray"
                    v-bind:key="remocon.id + '_card-right-gray'"
                  >
                    <battery100 v-bind:key="remocon.id + '_battery'" />
                  </div>
                </div>
                <div
                  class="card-bottom"
                  v-bind:key="remocon.id + '_card-bottom'"
                >
                  {{ remocon.label }}
                </div>
              </div>
              <div class="mr10" v-bind:key="remocon.id + '_mr10'"></div>
            </template>
            <div class="pr30"></div>
          </div>

          <div class="second_row">
            <template v-for="remocon in secondRow.models">
              <div
                class="sh-card_on"
                @click="openDialog(remocon, $event)"
                v-bind:key="remocon.id + '_sh-card_on'"
              >
                <div class="card-top" v-bind:key="remocon.id + '_card-top'">
                  <div class="card-left" v-bind:key="remocon.id + '_card-left'">
                    <component
                      v-bind:is="remocon.appProductIcon"
                      width="30px"
                      alt="SPOT"
                      v-bind:key="remocon.id + '_appProductIcon'"
                    ></component>
                  </div>
                  <div
                    class="card-right_on"
                    v-bind:key="remocon.id + '_card-right_on'"
                  >
                    ON
                  </div>
                </div>
                <div
                  class="card-bottom"
                  v-bind:key="remocon.id + '_card-bottom'"
                >
                  {{ remocon.label }}
                </div>
              </div>
              <div class="mr10" v-bind:key="remocon.id + '_mr10'"></div>
            </template>
            <div class="pr30"></div>
          </div>
        </div>
      </div>

Я на самом деле на готовность отказаться и принять ограничения моего навыка и доступные инструменты для веб-разработки. Но я действительно хочу сделать эту работу, поэтому я беззастенчиво прошу помощи.

...