dynamic positioning

by jpeter06

HTML

<div id="main">
    <riot-container id="one" style="width: 31.4261%; height: 50.1018%; top: 0%; left: 0%; background:blue"> <div><h2>asd</h2><p>asdf as asdf asdf a</p></div>
   </riot-container>
    <riot-container id="two" style=" width: 31.4261%; height: 50.1018%; top: 50.1018%; left: 0%;background:yellow">
   </riot-container>
    <riot-container id="three" style=" width: 68.5739%; height: 35.8452%; top: 0%; left: 31.4261%; background:green">
   </riot-container>    
    <riot-container id="four" style=" width: 68.5739%; height: 64.1548%; top: 35.8452%; left: 31.4261%;background:orange">
   </riot-container>    
</div>
<div id="main2">
    <div id="selector2"></div>
    <div id="container2"></div>
</div>
<div id="bcont">
<button id="move" onclick="mover()">move</button>
<button id="back" onclick="volver()">back</button>
</div>

CSS

.stack2{
    float:left !important;
    width:100% !important; height:30% !important;
    position:static !important;
    zoom:0.4;
}

.fullSize2{
    width:100% !important; height:100% !important;
    position:static !important;
}

#bcont{ position:absolute;top:0px;left:0px; z-index:2}
#selector2{
   position: absolute;
    left: 0px;   top: 0px;  bottom: 0px;
    width:25%;   padding: 0px;
    background: rgba(0,0,0,0.6);
    overflow: auto;
}

#container2{
     position: absolute;
    right: 0px; top: 0px; bottom: 0px;
    width:75%;    padding: 0px;
    background: rgba(0,0,0,0.4);  
}

riot-container {
    box-sizing: border-box;
    display: block;
    position: absolute;
    padding: 12px;
    transition: all 0.8s ease;
}

#main {
    position: absolute;
    left: 14px; right: 14px; top: 10px; bottom:10px;
    padding: 0px;
    overflow: hidden;
    width: auto;
}

#main2 {
    position: absolute;
    left: 14px; right: 14px;  top: 10px; bottom:10px;
    padding: 0px;
    overflow: hidden;
    width: auto;
    z-index:-1;
}

JavaScript

$(function(){
    console.log("init");
    
})

function mover(){
    $('#main').children().each(function(){
        console.log(this);
        $(this).appendTo("#selector2").addClass("stack2");
        click2($(this));
    });
    $('#main').css('z-index', -2);
}

function volver(){
    $('#selector2,#container2').children().each(function(){
        $(this).appendTo("#main").
        removeClass("stack2").removeClass("fullSize2").
        unbind("click");
    });
    $('#main').css('z-index', 1);
}


function click2(obj){
    obj.on( "click",function( event ) {
  		event.preventDefault();
      $('#container2').children().each(function(){
        $(this).appendTo("#selector2").addClass("stack2").
        removeClass("fullSize2");
        click2($(this));
      });
   	  $(this).appendTo("#container2").
      removeClass("stack2").addClass("fullSize2").
      unbind("click");
	  });	
}