En este ejemplo necesito que al div #fijo
se le añada antes con un .preppend
el div
que se haya seleccionado de la lista de "prefijados" y tras esto si seguimos añadiendo "prefijados" éstos se añadan antes del último prefijado y si des-seleccionamos todo que el proceso vuelva a empezar.
Ejemplo
Si hago click
en Prefijado 2 : se añadirá el div #prefijado2
antes de #fijo
Si hago click
en Prefijado 3 : se añadirá el div #prefijado3
antes de #prefijado2
Si des-selecciono todo: se retirarán los divs
y volverá a añadirse cualquiera de los 3 antes de #fijo
.
*{margin:0; padding:0}
#container{width:100%; position:absolute; top:50px;}
#fijo{width:50%; height:100px; background:red; margin-left:25%;}
#prefijado1{width:50%; height:100px; background:cyan; margin-left:25%;}
#prefijado2{width:50%; height:100px; background:yellow; margin-left:25%;}
#prefijado3{width:50%; height:100px; background:green; margin-left:25%;}
ul{display:table; position:fixed; text-align:center;}
il{display:table-cell;}
<div id="container">
<ul>
<li>Prefijado1 <input type="checkbox" id="pref1" value="prefijado1"></li>
<li>Prefijado2 <input type="checkbox" id="pref2" value="prefijado2"></li>
<li>Prefijado3 <input type="checkbox" id="pref3" value="prefijado3"></li>
</ul>
<div id="fijo">
</div>
</div>
<div id="prefijadoX">
, al menos según la especificación.