Skip to main content
Intercambiar posición entre div que recibió clic y el que está al frente
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36
$(document).ready(function() {
        $(".ta").click(function (e) {
        // 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(e.target$(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>
$(document).ready(function() {
        $(".ta").click(function (e) {
            $("#padre").append(e.target);
        });
});
#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>
$(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>
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

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 (e) {
            $("#padre").append(e.target);
        });
});
#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>