Tema: cambiar de posicion un checkbox al ser activado
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 26/11/2013, 11:24
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

Discula por no expresarme bien o por no plantear bien el caso pero de esta forma no me sirve ya que son mas articulos

Ejemplo mas concreto http://mexware.comyr.com/ejemplo/eje2/eje1.php

Limito los articulos en este caso 3 con el sigiente codigo
Código HTML:
var num = 0 ;
$("div[id='este']").click(function () {
	if (num == 3){
			return (true);
		}
        $(this).clone().appendTo($("#dos"));
	$("#dos > *").attr("id", "square");
        $(this).remove();
		num++;
});
pero sigo sin poder quitar los articulos del <div id = "dos"> y regresarlos al <div id = "uno">

al pasarlo al div dos le cambio la id por square para poder utilizar el sigiente codigo:
Código HTML:
$("div[id='square']").click(function () {
        $(this).clone().appendTo($("#uno"));
		$("#uno > *").attr("id", "este");
        $(this).remove();
});
Si cambia la id a square pero no ace la funcion para pasarlo al div uno

Alguna sugerencia