Задать вопрос
@BratCor
javascript

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

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

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

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

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


А по-хорошему, нужно на старте парсить блоки и давать им, например, какой-то дата-атрибут, куда прописывать стартовые (текущие) значения, с которыми уже сравнивать состояние при изменении ширины экрана.
Ответ написан
6 комментариев
6 комментариев
Пригласить эксперта
Ответы на вопрос 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/
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработка андроид приложения на kotlin
24 апр. 2024, в 23:13
130000 руб./за проект
Внести правки в Телеграм-бота с помощью кода(PHP-разработчик)
24 апр. 2024, в 22:44
11000 руб./за проект
HFT (high frequency trading) разработка торгового бота c#/c++
24 апр. 2024, в 22:30
200000 руб./за проект
Ещё заказы