1

Есть такая разметка (код):

$(window).on('resize', function(){
  
  var
    row = $('.row'),
    box = row.find('.box'),
    active1 = $('.s-2'),
    active2 = $('.s-5'),
    left = row.find('.left'),
    right = row.find('.right');
  
  //console.log(active);
  
  if ($(window).width() < 768) {
    if(active1.closest(right).length){
      left.insertBefore(active1);
    }
    
    if(active2.closest(right).length){
      left.insertBefore(active2);
    }
  }
  else {
   
  }
});
.row {
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

aside {
  background: lightblue;
  width: 250px;
  margin: 0 auto 20px;
  overflow: hidden;
}

main {
  height: 500px;
  background: #ccc;
}


.box {
  height: 100px;
  background: #ddd;
  margin: 10px;
}


@media screen and (min-width: 768px) {
  aside {
    width: 25%;
  }
  
  .left {
    float: left;
  }

  .right {
    float: right;
  }
  
  main {
    width: 50%;
    float: left;
  }

}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
<div class="row">
  <aside class="left">
    <div class="box s-1">1</div>
    <div class="box s-2">2</div>
    <div class="box s-3">3</div>  
  </aside>
  
  <main>
    
  </main>
  
  <aside class="right">
    <div class="box s-4">4</div>
    <div class="box s-5">5</div>
    <div class="box s-6">6</div> 
  </aside>
</div>

На каждой странице порядок виджетов (.box) может быть разный (т.е. 123 | 456 или 281 | 354 и т.д), но на девайсах меньше 768px в левом сайдбаре должны оставаться только определенные блоки (например, 2-й и 5-ый), а все остальные должны перемещаться в правый сайдбар.

Т.е. должна получиться такая разметка на планшетах и ниже:

<div class="row">
  <aside class="left">
    <div class="box s-2">2</div>
    <div class="box s-5">5</div>  
  </aside>

  <main>

  </main>

  <aside class="right">
    <div class="box s-1">1</div>
    <div class="box s-3">3</div>
    <div class="box s-4">4</div>
    <div class="box s-6">6</div> 
  </aside>
</div>

Пока не могу даже придумать идею. Пытаюсь проверить, есть ли нужный блок в .right. Если есть, то добавить его в .left, но, видимо, уже неправильно.

Вопрос: как можно переместить необходимые блоки (например, второй и пятый) в один левый сайдбар, а все оставшиеся блоки переместить в правый сайдбар?

1 ответ 1

1

Я бы сделал это так:

  • вводим новые классы, описывающие отношение виджетов к сайдбарам;
  • при разрешение ниже 768 двигаем все блоки в правый сайдбар, а блоки 2 и 5 - в левую;
  • при разрешении выше 768 возвращаем блоки в свои сайдбары.

var
  row = $('.row'),
  box = row.find('.box'),
  toLeft = $('.box-to-left'),
  left = row.find('.left'),
  right = row.find('.right'),
  leftBox = $('.box-left'),
  rightBox = $('.box-right');

function moveBlocks() {
  if ($(window).width() < 768) {
    box.not(toLeft).appendTo(right);
    toLeft.appendTo(left);
  } else {
    leftBox.appendTo(left);
    rightBox.appendTo(right);
  }
}

moveBlocks();

$(window).on('resize', function() {
  moveBlocks();
});
.row {
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

aside {
  background: lightblue;
  width: 250px;
  margin: 0 auto 20px;
  overflow: hidden;
}

main {
  height: 500px;
  background: #ccc;
}

.box {
  height: 100px;
  background: #ddd;
  margin: 10px;
}

@media screen and (min-width: 768px) {
  aside {
    width: 25%;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  main {
    width: 50%;
    float: left;
  }
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>

<div class="row">
  <aside class="left">
    <div class="box box-left s-1">1</div>
    <div class="box box-left box-to-left s-2">2</div>
    <div class="box box-left s-3">3</div>
  </aside>

  <main>

  </main>

  <aside class="right">
    <div class="box box-right s-4">4</div>
    <div class="box box-right box-to-left s-5">5</div>
    <div class="box box-right s-6">6</div>
  </aside>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.