Me lo contaron y lo olvidé, lo leí y lo entendí, lo hice y lo aprendí.





sábado, 16 de agosto de 2014

Posicionar/Re-ordenar/Desplazar elementos de una página web [JQUERY,JavaScript,HTML]

Podría ser en ocasiones necesario que, dentro de una página web, el usuario pueda o tenga que ordenar una lista de elementos (enlaces, opciones, texto...) de manera vertical (u horizontal).
Teniendo una lista como:

1.- elemento a.
2.- elemento b.
3.- elemento c.
4.- elemento d.

Y que el usuario la pueda cambiar el orden:

2.- elemento b.
4.- elemento d.
1.- elemento a.
3.- elemento c.

Sea cual sea la razón, realizar este trabajo en web podría resultar confuso debido a la forma de posicionamiento en una página.
A mí me resultó bastante cómodo el no pensar acomodar directamente los elementos en la pantalla, sino más bien tener un arreglo en JavaScript que contenga en cada posición el "id" de cada elemento al cual el usuario podrá interactuar.
arreglo:

[0] = "elemento1";
[1] = "elemento2";
[2] = "elemento3";
[3] = "elemento4";

El usuario, mediante clics en imágenes, cambiará la posición de cada valor en el arreglo; me refiero a que si da clic en la imagen que "baja" de posición el valor "elemento2", el arreglo quedaría así:

[0] = "elemento1";
[1] = "elemento3";
[2] = "elemento2";
[3] = "elemento4";

Ya, teniendo el arreglo ordenado, es más sencillo posicionar los elementos (referidos con su id) dependiendo de la posición en el vector; algo como:

posición y = 100px + (posición en el vector * 20) px;

El método que diseñé funciona así:

http://unrinconenlaweb.webcindario.com/reordenar/desplazar_vertical.html

Por simple dejadez no me preocupé en diseñar el mismo funcionamiento con un botón para "subir" el elemento y otro para "bajar"; pero la mecánica es sencilla: Una función (evento clic) para desplazar el valor dentro del vector; y otra función para posicionar la coordenada 'Y' de los elementos según la posición de su 'id' (valor del vector) dentro del vector, la cual consiste en un simple bucle for.

Para descargar el ejemplo, está el enlace de abajo :P

desplazar verticalmente elementos HTML con JQuery

Perfil Google+