Отсортировать блоки

262

30 июля 2017, 07:23

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

$(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, но, видимо, уже неправильно.

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

Answer 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>

Создание интернет-магазина интимных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отсортировать блоки

AICharacterControl unity c#

c# Отследить запрос к swf

LINQ при работе с массивами

Странный баг с коллизией