Foros del Web - Ver Mensaje Individual - cambiar de posicion un checkbox al ser activado

Alexis88 · #4 (**permalink**) 26/11/2013, 03:13

Pensando en otras formas de hacer esto, di con la siguiente: En lugar de clonar y mover el elemento a otra sección para, finalmente, eliminar el original, basta con moverlo, alterando los valores de su posición.

Código HTML:

Ver original<!DOCTYPE html>
<html lang = "es">
<head>
  <meta charset = "utf-8" />
  <style type = "text/css">
    #uno, #dos {
      width: 12.5em;
      height: 7em;
    }
    
    #uno {
      background: #0f0;
    }
    
    #dos {
      background: #f00;
    }
    
    div {
      display: inline-block;
      width: 5em;
      height: 2em;
      background: yellow;
      text-align: center;
      margin: .5em;
      position: relative;
    }
  </style>
 
</head>
<body>  
  <section id = "uno">
    <div data-level = "1" id = "a"> 1 </div>
    <div data-level = "1" id = "b"> 2 </div>
    <div data-level = "1" id = "c"> 3 </div>
    <div data-level = "1" id = "d"> 4 </div>
  </section>
      
  <section id = "dos"></section>
 
  <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.10.2.js"></script>
  <script type = "text/javascript">
  $("div").click(function () {
    var data = this.getAttribute("data-level");
    
    if (data == 1) this.setAttribute("data-level", 2);
    else this.setAttribute("data-level", 1);
    
    if (this.getAttribute("data-level") == 1)
      $(this).animate({"top": "-=8em"}, 1200);
    else
      $(this).animate({"top": "+=8em"}, 1200);
  });    
  </script>
</body>
</html>

A cada div, le asigné el atributo personalizado data-level, el cual empieza con el valor 1, pero cada vez que le de un clic a cada div, dicho valor cambiará, si era 1, pasará a ser 2 y viceversa, con esto determinaremos si el div se mueve hacia arriba o hacia abajo.

Saludos