Как поменять элементы в сетке на клик без перезагрузки DOM

Question

https://codepen.io/anon/pen/QPYppp?&editable=true

jQuery.fn.swap = function(b) {
  b = jQuery(b)[0];
  var a = this[0],
    a2 = a.cloneNode(true),
    b2 = b.cloneNode(true),
    stack = this;

  a.parentNode.replaceChild(b2, a);
  b.parentNode.replaceChild(a2, b);

  stack[0] = a2;
  return this.pushStack(stack);
};

function changeVideos() {
  $('.wrap-grid > div:nth-child(n + 2)').click(function() {
    $('.wrap-grid > div:nth-child(1)').swap($(this));
    $(this).off();
    changeVideos();
  })
};
changeVideos();

*,
::after,
::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.main-content .container>.row> :first-child {
  padding-left: 0;
}

.main-content .container>.row> :last-child {
  padding-right: 0;
}

.wrap-grid {
  width: 100%;
  display: grid;
  grid-gap: 10px;
  grid-auto-columns: 1fr 1fr;
  grid-template-areas: "a b" "a c" "a d";
  margin-bottom: 20px;
}

.wrap-grid>div {
  position: relative;
}

.wrap-grid iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.wrap-grid>* {
  width: 100%;
  background: #fff;
}

.wrap-grid> :nth-child(n + 2) iframe {
  pointer-events: none;
}

.wrap-grid> :nth-child(1) {
  grid-area: a;
  padding-top: 56.25%;
}

@media (max-width: 991.98px) {
  .wrap-grid {
    grid-template-areas: "a" "b" "c" "d";
  }
  .wrap-grid>* {
    height: 255px;
  }
  .wrap-grid> :nth-child(1) {
    height: 255px;
  }
  .main-content .container>.row> :first-child,
  .main-content .container>.row> :last-child {
    padding-left: 0;
    padding-right: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap-grid">
  <div><iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
  <div><iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
  <div><iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>
  <div><iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe></div>

</div>

Я пытаюсь поменять один из трех элементов на правой стороне с элементом налевая сторона.То же, что в примере, где я пытался поменяться местами с jquery, но это перезагрузить элементы dom, и они мигают.Есть ли способ сделать это с помощью манипулирования свойствами, такими как order в flexbox или, возможно, с макетом grid.

Answer 1

Во-первых, вы создаете видео и загружаете его в iframe, который должен перезагружаться при его перемещении.

Я бы порекомендовал пересмотреть код, чтобы загрузить базовое изображение, поскольку для его перезагрузки не требуется времени по сравнению с полным видео на YouTube.

обложка для видео на YouTube

 <img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg">

и для вашего видео это будет:

   <img class="youtube-thumb" src="//i.ytimg.com/vi/Bey4XXJAqS8/hqdefault.jpg">

Answer 2

Вы можете получить доступ и настроить их flexbox order с простым JavaScript:

document.getElementById('your-id').style.order = 2
document.getElementById('your-id').style.order // returns "2"

или jQuery:

$('#your-id').css('style', 2)
$('#your-id').css('style') // returns "2"