Mover elementos arriba y abajo - problema con indices despues

[el_javi]

Hola a todos.

Tengo una programación para ordenar listados.

Son flechas, que al pulsar, el elemento actual sube y el de arriba baja (o al pulsar el elemento actual baja y el siguiente sube) (dependiendo de la flecha pulsada).

Los elementos están en posiciones ABSOLUTAS para poder producir un efecto de desplazamiento (con animate de jQuery)


Situación inicial:

elemento 1 -----> index 0
elemento 2 -----> index 1
elemento 3 -----> index 2
elemento 4 -----> index 3


Pulso sobre el elemento 2 para BAJARLO y la situación es esta:

elemento 1 -----> index 0
elemento 3 -----> index 2
elemento 2 -----> index 1
elemento 4 -----> index 3


Visualmente se han desplazado los elementos pero, yo veo el código fuente, y:
- 1) Los elementos siguen en el mismo orden que en el inicial
- 2) Al ejecutar una bajada del elemento 2 (o del elemento 3 que se ha subido para arriba) se me ejecuta el evento MAL, porque los índices están mal ordenados, FISICAMENTE no se han reorganizado como visualmente.
- 3) Si reccorro el array de elementos, me los recorre en el sentido INICIAL, no me muestra el elemento movido, porque s eha movido VISUALMENTE no a nivel de DOM.


¿Como organizar los elementos o mover los índices para que lo visual se corresponda con el DOM?


Aqui un ejemplo en funcionamiento: http://jsfiddle.net/L8qebbo5/

Gracias y un saludo.


Javier.

[Panino5001]

Una vez finalizada tu animación recrea el contenido en el orden correcto con innerHTML o replaceChild (obviamente el código fuente quedará igual, pero el DOM estará modificado).

[el_javi]

Hola Panino5001

Eso ya lo pensé, pero si recorro los elementos con jQuery, obtengo el array de los mismos en el orden INICIAL, sin el cambio ni el movimiento de posición.

Entonces, no me es posible tener el orden real.

¿qué se os ocurre o cómo véis que debería hacerlo?

(estoy arreglando el JS del enlace que hay un error cillo y se mueven mal los elementos)

[el_javi]

Ahora el jsfiddle que he montado funciona binen (y mal).

La primera vez, hace perfecto el movimiento.

La segunda tex que pulsamos lo hace mal porqu elos elementos del DOM no están bien correlativos como la visual mostrada.


ayudas please.

[el_javi]

Bueno gente.

Al final la solución a mi problema ha venido rápido:

He hecho un callback final (al terminar de ejecutarse las dos animaciones).
Este callback, coge estos dos elementos con los que nos hemos movido, y los recoloca a nivel DOM uno delante del otro (insertBefore e insertAfter).

con esto he conseguido tener el DOM exactamente igual que lo visual y no me da fallos ni problemas :)

Aquí el ejemplo final (solo queda recolocar las flechitas (cuadros rojos y azules) para que al bajar el primero aparezcan las 2 flechas (y el que sube solo tenga flecha de bajar).

http://jsfiddle.net/L8qebbo5/4/


Gracias por la ayuda!!! :)



Javier