Swap div position

Swap div position with an array of divs.

by Craig Martin

HTML

<div id="vcont">
<div id="div1" class="vframe main_vframe"><iframe src="https://vdo.ninja/?view=kSW3GZn"></iframe><div>CAM 1</div></div>
<div id="div2" class="vframe"><iframe src="https://vdo.ninja/?view=kSW3GZn"></iframe><div>CAM 2</div></div>
<div id="div3" class="vframe"><iframe src="https://vdo.ninja/?view=kSW3GZn"></iframe><div>CAM 3</div></div>
</div>

CSS

div{cursor: pointer;}
#div1{color: yellow; background-color: blue;}
#div2{color: blue; background-color: yellow;}
#div3{color: white; background-color: red;}


.vframe {
border: 3px solid red;
}

.main_vframe {
border: 3px solid #000000;
}

.main_vframe iframe {
  width:450px;
  height:auto;
}

JavaScript

jQuery("body").on("click", ".vframe", function() {
		jQuery(".main_vframe").removeClass('main_vframe').clone().append("#vcont");
		jQuery(this).clone().prependTo("#vcont");
		jQuery(".vframe:eq(0)").addClass('main_vframe');
    jQuery(this).remove();

});