Tema: cambiar de posicion un checkbox al ser activado
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 27/11/2013, 11:25
bemitoreya
 
Fecha de Ingreso: marzo-2010
Mensajes: 50
Antigüedad: 14 años, 9 meses
Puntos: 0
Respuesta: cambiar de posicion un checkbox al ser activado
Cita:
Iniciado por Alexis88 Ver Mensaje
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
  1. <!DOCTYPE html>
  2. <html lang = "es">
  3. <head>
  4.   <meta charset = "utf-8" />
  5.   <style type = "text/css">
  6.     #uno, #dos {
  7.       width: 12.5em;
  8.       height: 7em;
  9.     }
  10.     
  11.     #uno {
  12.       background: #0f0;
  13.     }
  14.     
  15.     #dos {
  16.       background: #f00;
  17.     }
  18.     
  19.     div {
  20.       display: inline-block;
  21.       width: 5em;
  22.       height: 2em;
  23.       background: yellow;
  24.       text-align: center;
  25.       margin: .5em;
  26.       position: relative;
  27.     }
  28.   </style>
  29.  
  30. </head>
  31. <body>  
  32.   <section id = "uno">
  33.     <div data-level = "1" id = "a"> 1 </div>
  34.     <div data-level = "1" id = "b"> 2 </div>
  35.     <div data-level = "1" id = "c"> 3 </div>
  36.     <div data-level = "1" id = "d"> 4 </div>
  37.   </section>
  38.       
  39.   <section id = "dos"></section>
  40.  
  41.   <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.10.2.js"></script>
  42.   <script type = "text/javascript">
  43.   $("div").click(function () {
  44.     var data = this.getAttribute("data-level");
  45.     
  46.     if (data == 1) this.setAttribute("data-level", 2);
  47.     else this.setAttribute("data-level", 1);
  48.     
  49.     if (this.getAttribute("data-level") == 1)
  50.       $(this).animate({"top": "-=8em"}, 1200);
  51.     else
  52.       $(this).animate({"top": "+=8em"}, 1200);
  53.   });    
  54.   </script>
  55. </body>
  56. </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

Analizando bien el codigo y asiendo unos ajustes consegi lo que queria gracias a tu codigo te agradesco y me cuesta trabajio por que soy algo nuevo en esto
Nuevamente gracias por la ayuda Tema solucionado.

Aqui como quedo el script

Código HTML:
<script type = "text/javascript">
  $("div").click(function () {
    var data = this.getAttribute("data-level");
   

    if (this.getAttribute("data-level") == 1)
	{
	$(this).appendTo('#dos');
	this.setAttribute("data-level", 2);
	}
    else
	{
     $(this).appendTo('#uno');
	 this.setAttribute("data-level", 1);
	}
  });    
  </script>