@BratCor

Как отменить .appendTo и другое?

В общем при размере окна меньше 600px скрипт перемещает блок с одного места в другое.
Но когда делаешь ресайз обратно, что бы окно стало больше 600px, то перемещённый блок не возвращается обратно на место( Он вернётся только если перезагрузить страницу.
Вопрос в том, как заставить вернутся блок обратно? Желательно как-то отменить скриптом все .appendTo, а не прописывать каждому его положение по умолчанию, так как в реальном проекте их много.

Для наглядности прикрепляю пример и видео

Пример: https://jsfiddle.net/3ve8pyk9/
Видео: https://youtu.be/uCtBrzFG-BU
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
rockfeeler
@rockfeeler
Фронтендер, дизайнер, верстальщик-перфекционист
Ну как минимум так:

if (window.matchMedia('(max-width: 600px)').matches) {
    $('.block__1').appendTo('.wr__2');
} else {
    $('.block__1').appendTo('.wr__1');
}


А по-хорошему, нужно на старте парсить блоки и давать им, например, какой-то дата-атрибут, куда прописывать стартовые (текущие) значения, с которыми уже сравнивать состояние при изменении ширины экрана.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ivan386
Я бы без JS решил так.

html:
<div class="wr">
  <div class="block block__6">БЛОК 6</div>
  <div class="block block__5">БЛОК 5</div>
  <div class="block block__4">БЛОК 4</div>
  <div class="block block__3">БЛОК 3</div>
  <div class="block block__2">БЛОК 2</div>
  <div class="block block__1">БЛОК 1</div>
  </div>


css:
.wr {
  display: flex;
  flex-flow: wrap-reverse;
  flex-direction: row-reverse;
}

.block {
  width: 33%;
}

@media (max-width: 600px){
  .block {
   width: 25%; 
  }
  .block__1 {
    order: -1;
  }
}


demo: https://jsfiddle.net/t6a9Lbju/2/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы