Este artículo explica cómo realizar una interfaz de ordenación, es decir, un sistema para que el usuario pueda ordenar una serie de elementos. Es una interfaz de usuario bastante típica que presenta una serie de elementos con un orden dado. Los elementos tienen al lado unas flechitas, que sirven para alterar su orden. Si apretamos la flechita hacia arriba que hay al lado de un elemento, intercambia su posición con el elemento de arriba. Si pulsamos la flechita hacia abajo, se intercambia ese elemento con el que haya en la posición de abajo.

Es muy interesante que podamos ver el resultado final del artículo para hacernos una idea de los objetivos.

Para la realización de este ejemplo utilizaremos una librería que se llama xLibrary, que permite la creación de código DHTML compatible con todos los navegadores (Cross-Browser). Esta librería la venimos utilizando en todo el manual de Cross-Browser DHTML.

Pues bien, el ejemplo puede parecer complicado, pero no lo es. Por suerte es bastante simple. Trabajaremos de la siguiente manera:

Vamos a crear un array de elementos y lo vamos a inicializar con unos cuantos valores. Estos valores son los que aparecerán en el listado a ordenar.

Luego vamos a crear una capa vacía inicialmente, que hemos llamado "listado_elementos". En esa capa es donde colocaremos la interfaz de ordenación de elementos. Como los elementos que aparecerán en el listado pueden variar y además podemos cambiar su orden, el listado de los elementos deberá realizarse dinámicamente.

Así pues, una vez cargada la página y cada vez que se varíe el orden del listado, tendremos que escribir en la capa "listado_elementos" un nuevo contenido. La única parte que es realmente DHTML de este ejercicio es justamente esta, la escritura de un texto en una capa. El resto es un simple manejo de arrays.

Veamos el código por partes

Primero tenemos el código HTML, que decíamos, es una capa inicialmente vacía.

<div id="listado_elementos">
</div>

Luego, veremos el código Javascript para el listado de los elementos:

function imprime_listado_basico(){
    texto="";
    for (i=0;i<elementos.length;i++){
       texto += elementos[i];
       if (i!=0){
          texto += " <a href='#' onclick='arriba(" + i + ")'>arriba</a>";
       }
       if (i!=elementos.length-1){
          texto += " <a href='#' onclick='abajo(" + i + ")'>abajo</a>";
       }
       texto += "<br>";
    }
    xInnerHtml('listado_elementos',texto);
}

Fijémonos que la función crea una variable que se llama texto y va introduciendo los contenidos en esa variable, que luego escribirá en la capa. El contenido lo va generando al realizar un bucle por todos los elementos del array. En cada iteración escribe el elemento en la variable y seguidamente coloca un enlace para mover el elemento hacia arriba y otro hacia abajo. Esos enlaces contienen llamadas a dos funciones Javascript arriba() y abajo(), a las que se le envía el índice del elemento que se quiere mover arriba o abajo.

Un detalle. Antes de mostrar el enlace de arriba o abajo, se realiza una comprobación. Si es el primer elemento no debe mostrarse el enlace para subir su posición (porque ya es la primera). Igualmente, si es el último elemento, no se debe mostrar el enlace para bajar su posición.

Por último se escribe el texto generado en la capa por medio de la función xInnerHtml(), que es una función de la librería para DHTML Cross-Browser. Esta función recibe dos parámetros, el primero es el nombre de la capa a cambiar su texto y el segundo el texto que se va a escribir en la capa.

Nota: Para poder utilizar la función xInnerHtml(), tenemos que incluir las librerías Cross Browser xLibrary. De lo contrario, la llamada a esta función provocará un mensaje de error, porque Javascript no la conocería. Para incluir las librerás, tenemos que generar un archivo .js que incluiremos en la página como código externo. Sólo tendremos que seguir los pasos que se relatan en el artículo X Library Compiler.

Ahora veamos las funciones arriba() y abajo()

function arriba(i){
    temporal = elementos[i];
    elementos[i]=elementos[i-1];
    elementos[i-1]=temporal;
    imprime_listado()
}

function abajo(i){
    temporal = elementos[i];
    elementos[i]=elementos[i+1];
    elementos[i+1]=temporal;
    imprime_listado()
}

Como habíamos dicho, ambas funciones reciben el índice que hay que cambiar de posición. La función arriba() realiza un intercambio del elemento i por el elemento que está arriba (el i-1). La función abajo realiza un intercambio del elemento i por el elemento que está abajo (el i+1).

Y con esto ya está. Nos faltaría una pequeña mejora que vamos a contar un poco más adelante. Pero hasta el momento, el ejemplo es funcional.

Podemos ver el ejemplo en marcha hasta el momento en este enlace.

Mejora visual

Es cierto que la lista de elementos no ha quedado muy vistosa. Ahora vamos a mejorarla con un par de detalles. Primero, el texto "Arriba"y "Abajo" lo vamos a sustituir por una flechita hacia arriba y otra hacia abajo. Luego, vamos a meter todo el listado dentro de una tabla, para que los elementos queden mejor alineados.

Lo único que hay que cambiar es la función imprime_listado(). Su código es el siguiente:

function imprime_listado(){
    texto="<table>";
    for (i=0;i<elementos.length;i++){
       texto += "<tr bgcolor='#eeeeee'>";
       texto += "<td>" + elementos[i] + "</td>";
       if (i!=0){
          texto += "<td><a href='#' onclick='arriba(" + i + ")'><img src='arriba.gif' width=9 height=9 border=0></a></td>";
       }else{
          texto += "<td></td>";
       }
       if (i!=elementos.length-1){
          texto += "<td><a href='#' onclick='abajo(" + i + ")'><img src='abajo.gif' width=9 height=9 border=0></a></td>";
       }else{
          texto += "<td></td>";
       }
       texto += "</tr>";
    }
    texto += "</table>";
    xInnerHtml('listado_elementos',texto);
}

Si hemos entendido la primera parte del ejercicio, esta otra no debería representar ningún problema.

Podemos ver en marcha el ejercicio con esta mejora aplicada.

Podemos descargar un zip con los archivos utilizados en este ejemplo.