1

Estoy con un problema de 6 divs apilados, solapados pero desplazados hacia abajo y hacia la derecha de tal modo que me permite dar clic a cada uno de éllos. Lo que quiero es que al dar clic en cualquiera de estos, se desplace al frente; pero que el div anterior se mueva a ocupar su lugar.

He probado con un script de JQuery, pero no logro conseguirlo.

Aqui está el codigo que he probado:

$(document).ready(function() {
        $(".ta").click(function () {
            $(this).css({"z-index":"100","left":"140","top":"140"});
            $(this).siblings().css({"z-index":"0","left":"","top":""});
        });
});
#padre{
        border:solid 1px #2A1212;
        width: 550px;
        height: 500px;
        background-color: #D8E9F4;
        position: relative;
}
.ta{
        border:double 4px #2D2727;
        border-radius: 5px;
        width: 350px;
        height: 250px;
        position: absolute;
}
#tab1{
        background-color: #F40C0C;
        left: 20px;
        top: 20px;
        z-index: 1;
}
#tab2{
        background-color: #EC0CF4;
        left: 40px;
        top: 40px;
        z-index: 2;
}
#tab3{
        background-color: #2D0CF4;
        left: 60px;
        top: 60px;
        z-index: 3;
}
#tab4{
        background-color: #0CF1F4;
        left: 80px;
        top: 80px;
        z-index: 4;
}
#tab5{
        background-color: #0CF43D;
        left: 100px;
        top: 100px;
        z-index: 5;
}
#tab6{
        background-color: #F1F40C;
        left: 120px;
        top: 120px;
        z-index: 6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="padre">
        <div id="tab1" class="ta"></div>
        <div id="tab2" class="ta"></div>
        <div id="tab3" class="ta"></div>
        <div id="tab4" class="ta"></div>
        <div id="tab5" class="ta"></div>
        <div id="tab6" class="ta"></div>
</div>

1 respuesta 1

1

En CSS usa ID solo para asignar color, clase para el resto de atributos y, para las posiciones, usa div:nth-child, asignando ubicación de acuerdo a la posición del elemento dentro de #padre (1 a 6).

Cuando se hace clic en uno de los elementos muévelo al frente, aprovechando que jQuery(padre).append(elemento) o Node.appendChild(elemento) simplemente mueven el elemento al final del contenedor, aplicando automáticamente las reglas CSS para reubicar todos los divs:

$(document).ready(function() {
    $(".ta").click(function () {
        // Posición del elemento actual (0 a 5)
        let index = $(this).index();
        // Mover solo si no está ya al frente
        if(index < 5) {
            // Traer el elemento del frente (5)
            // a la posición del elemento que recibió el clic
            $(".ta").eq(5).insertBefore($(this));
            // Enviar elemento al frente
            $("#padre").append($(this));
        }
    });
});
#padre{
        border:solid 1px #2A1212;
        width: 550px;
        height: 500px;
        background-color: #D8E9F4;
        position: relative;
}
#padre div:nth-child(1) {
        left: 20px;
        top: 20px;
        z-index: 1;
}
#padre div:nth-child(2) {
        left: 40px;
        top: 40px;
        z-index: 2;
}
#padre div:nth-child(3) {
        left: 60px;
        top: 60px;
        z-index: 3;
}
#padre div:nth-child(4) {
        left: 80px;
        top: 80px;
        z-index: 4;
}
#padre div:nth-child(5) {
        left: 100px;
        top: 100px;
        z-index: 5;
}
#padre div:nth-child(6) {
        left: 120px;
        top: 120px;
        z-index: 6;
}
.ta{
        border:double 4px #2D2727;
        border-radius: 5px;
        width: 350px;
        height: 250px;
        position: absolute;
}
#tab1{
        background-color: #F40C0C;
}
#tab2{
        background-color: #EC0CF4;
}
#tab3{
        background-color: #2D0CF4;
}
#tab4{
        background-color: #0CF1F4;
}
#tab5{
        background-color: #0CF43D;
}
#tab6{
        background-color: #F1F40C;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="padre">
        <div id="tab1" class="ta"></div>
        <div id="tab2" class="ta"></div>
        <div id="tab3" class="ta"></div>
        <div id="tab4" class="ta"></div>
        <div id="tab5" class="ta"></div>
        <div id="tab6" class="ta"></div>
</div>

6
  • Triby
    – Jorge
    Commented el 31 jul. 2020 a las 18:44
  • @Jorge, ¡ese soy yo!, ¿para qué soy bueno?
    – Triby
    Commented el 31 jul. 2020 a las 18:51
  • **@Triby Su respuesta a mi pregunta es Positiva. Las cajas se ubican en la posicion requerida. Me gusta el código por ser muy simple. Mi pregunta era(es.stackoverflow.com/questions/377533/…)**Triby
    – Jorge
    Commented el 31 jul. 2020 a las 18:53
  • Perfecto, si te funcionó, no olvides marcarla como aceptada.
    – Triby
    Commented el 31 jul. 2020 a las 18:54
  • ya la acepté. Que más debo hacer?
    – Jorge
    Commented el 31 jul. 2020 a las 19:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.