Отсоединение и добавление элемента до тех пор, пока его родительский элемент больше не будет переполнен зоной - jQuery - PullRequest
Новая
       6

Отсоединение и добавление элемента до тех пор, пока его родительский элемент больше не будет переполнен зоной - jQuery

0 голосов
/ 22 октября 2019

Я пытаюсь detach() элемент от его родителя (zone-col) и добавлять к следующему .zone-col, пока его новый родитель больше не переполняет зону.

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

Не уверен, что я вполне понимаю, что делают циклы while, так как я создал бесконечный цикл ...

Вот мой codepen 

$(function() {

  var zone = $('.zone');
  var el = $('.active');

  var zW = zone.outerWidth();
  var zR = zone.offset().left + zW;

  var eW = el.outerWidth();
  var eR = el.offset().left + eW;

  console.log(eR, zR);

  while (eR > zR) {
    var de = el.find('.widget').detach();
    el = el.nextAll('.zone-col:first');

    el.append(de);

    if (!eR > zR) {
      break;
    }
  }


});
.zone {
  width: 500px;
  height: 200px;
  border: 1px solid #ddd;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.zone-col {
  position: absolute;
  min-width: 8.333333%;
  width: auto;
  border: 1px solid black;
  height: 100px;
}

.widget {
  width: 496px;
  height: 100%;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="zone">
  <div class="zone-col" style="left: 0; top: 0;"></div>
  <div class="zone-col" style="left: 8.333333%; top: 0;"></div>
  <div class="zone-col active" style="left: 16.666667%; top: 0;">
    <div class="widget"></div>
  </div>
  <div class="zone-col" style="left: 25%; top: 0;"></div>
  <div class="zone-col" style="left: 33.333333%; top: 0;"></div>
  <div class="zone-col" style="left: 41.666667%; top: 0;"></div>
  <div class="zone-col" style="left: 50%; top: 0;"></div>
  <div class="zone-col" style="left: 58.333333%; top: 0;"></div>
  <div class="zone-col" style="left: 66.666667%; top: 0;"></div>
  <div class="zone-col" style="left: 75%; top: 0;"></div>
  <div class="zone-col" style="left: 83.333333%; top: 0;"></div>
  <div class="zone-col" style="left: 91.666667%; top: 0;"></div>

  <div class="zone-col" style="left: 0; top: 100px;"></div>
  <div class="zone-col" style="left: 8.333333%; top: 100px;"></div>
  <div class="zone-col" style="left: 16.666667%; top: 100px;"></div>
  <div class="zone-col" style="left: 25%; top: 100px;"></div>
  <div class="zone-col" style="left: 33.333333%; top: 100px;"></div>
  <div class="zone-col" style="left: 41.666667%; top: 100px;"></div>
  <div class="zone-col" style="left: 50%; top: 100px;"></div>
  <div class="zone-col" style="left: 58.333333%; top: 100px;"></div>
  <div class="zone-col" style="left: 66.666667%; top: 100px;"></div>
  <div class="zone-col" style="left: 75%; top: 100px;"></div>
  <div class="zone-col" style="left: 83.333333%; top: 100px;"></div>
  <div class="zone-col" style="left: 91.666667%; top: 100px;"></div>
</div>

Ответы [ 2 ]

0 голосов
/ 29 октября 2019

Понял, нужно было сбрасывать eW и eR при каждом запуске цикла, в противном случае цикл всегда получает первое инициализированное значение этих переменных. 

while (eR > zR) {
  var de = el.find('.widget').detach();
  el = el.nextAll('.zone-col:first');
  el.append(de);

  eW = el.outerWidth();
  eR = el.offset().left + eW;   

  if (!eR > zR) {
    break;
  }
}
0 голосов
/ 22 октября 2019

Вам нужно обновить значения сравнения внутри вашего цикла. Прямо сейчас eR всегда больше, чем zR, вызывая бесконечный цикл.

...