Prototype es un framework de javascript que pretende facilitar el desarrollo de aplicaciones web dinámicas. Prototype extiende javascript y nos ofrece funcionalidades que serían complejas de desarrollar con el clásico javascript.

Scriptaculous es una librería que extiende a Prototype proporcionándonos la capacidad de crear efectos visuales e incluso animaciones a partir de unas funciones muy sencillas. Para poder implementar listas ordenadas necesitamos usar una de las funciones de Scriptaculous que convierte una lista convencional en una lista ordenable en tiempo real.

Para crear la lista ordenada nos basaremos en  el ejemplo que podemos encontrar en la wiki de scriptaculous.

En primer lugar crearemos un documento html en el que añadiremos nuestra lista:


<ul id="lista">
  <li style="position:relative;">Lorem</li>
  <li style="position:relative;">ipsum</li>
  <li style="position:relative;">dolor</li>
  <li style="position:relative;">sit</li>
  <li style="position:relative;">amet</li>
  <li style="position:relative;">consectetur</li>
  <li style="position:relative;">adipisci</li>
  <li style="position:relative;">velit</li>
</ul>

Como veis hemos asignado una id al elemento ul llamado “lista” que después utilizaremos para decirle a Scriptaculous que lista debe convertir en ordenable. Por otra parte también hemos añadido position:relative; como estilo de cada ítem de la lista para que al convertirse en ordenable se puedan mover.

Para poder hacer uso de Prototype y Scriptaculous tenemos dos maneras de incluir las librerías, la primera de ellas es descargárnoslas y llamarlas desde nuestro html y la segunda manera es incluirlas directamente desde la web oficial (cabe destacar que google tiene una versión cacheada de estas librerías y podemos acceder a ellas desde el apartado API’S).

En nuestro código optamos por incluírlas directamente, para ello escribiremos el siguiente fragmento html entre las etiquetas head (aunque recientemente ha aparecido una Best Practice que indica que para cargar la página más rápidamente hay que llamar a javascript al final de la página justo antes del cierre del body) :


<script src="http://script.aculo.us/prototype.js" type="text/javascript"></script>
<script src="http://script.aculo.us/scriptaculous.js" type="text/javascript"></script>

Por último debemos decirle a Scriptaculous que lista debe convertir, para ello utilizaremos la siguiente instrucción:


<script language="javascript">
  Sortable.create("lista");
</script>

Con la línea “Sortable.create(“lista”);” convertimos nuestra lista convencional en una lista ordenable mediante Drag&Drop que esta muy de moda en la web 2.0. Si os fijáis en la llamada a la función create pasamos como primer parámetro el id de la lista que queremos convertir, esta función tiene otro parámetros que podemos descubrir en la página de la wiki referente a esta función, entre otras opciones podemos especificar que elementos son los que se van a mover por la lista (como por ejemplo tr en el caso de querer una tabla con sus filas ordenables) e incluso podemos especificar un handler (un elemento que va a actuar como el punto desde el que arrastrar el elemento).

Si os interesa saber más sobre los efectos que puede realizar esta librería sólo es cuestión de investigar en la wiki de scriptaculous dónde tenéis otra manera de ordenar listas como por ejemplo escoger que parte del ítem es la que queréis mover.

Aquí os dejo una pequeña demo de nuestra lista:

  • Lorem
  • ipsum
  • dolor
  • sit
  • amet
  • consectetur
  • adipisci
  • velit