Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de MooTools (III Avanzado)

MooTools: la librería más completa para trabajar fácilmente con javascript.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

MooTools3 (V)

Reordenar listas

La clase Sortables()

Mediante la clase Sortables de mootools el usuario puede cambiar el orden de los elementos de una lista simplemente arrastrándolos a otra posición. Al arrastrar un elemento éste lo cambiamos de sitio en la lista. Los demás elementos de la lista subirán o bajarán una posición para dejar hueco al elemento que hemos cambiado.

Por lista entendemos no sólo las listas de HTML con etiquetas ul, ol, sino cualquier elemento que contenga otra serie de elementos, por ejemplo un div con varios párrafos en su interior.

Instanciar un objeto

Para tener una lista reordenable, lo primero que debemos hacer es instanciar un objeto de la clase Sortables :

lista1=new Sortables(lista,{[opciones]});

Como primer argumento podemos pasar el elemento que contiene la lista o un array con varios elementos que contienen cada uno una lista.

lista1=new Sortables($("lista1"));

lista2=new Sortables([$("lista2"),$("lista3")]);

El elemento o elementos que ponemos como primer argumento son los que contienen la lista o listas, y no los elementos de la lista en sí.

El segundo argumento es opcional, y consiste en una serie de opciones que veremos a continuación. Aunque no es obligatorio ponerlo, es conveniente hacerlo cuando queremos realizar algun efecto o acción relacionado con las opciones. Además también hay una serie de eventos que podemos ponerlos como opciones en el segundo argumento.

Vemos aquí a la derecha un ejemplo de una lista que podemos reordenar. más adelante veremos otro ejemplo con más detalle en el que explicaremos su código.

Opciones

Estas son las opciones que podemos poner en el segundo argumento al instanciar el objeto:

• clone : Valor booleano. por defecto false. Si ponemos true al mover el elemento de la lista se creará una copia que es arrastrada con el cursor. La copia aparece al coger el elemento, es arrastrada con el cursor, y desaparece al soltar el elemento.
• opacity : Indica el grado de transparencia que tiene el elemento mientras lo estamos moviendo. Su valor es un número entre el 0 y el 1, e indica el grado de transparencia de la misma manera que la propiedad opacity de CSS. El valor por defecto es 1 (opacidad total).
• dragOptions : {} En esta opción podemos poner, siempre dentro de llaves {}, una o varias opciones de la clase Drag.Move(), teniendo el mismo efecto que en esta clase.

Eventos

Al igual que en otras clases de mootools, los eventos específicos de esta clase, pueden indicarse al instanciar el objeto con el prefijo on y el nombre en mayúsculas: onStart: function(){}; o sobre un objeto ya instanciado: lista1.addEvent("start", function(){});. Veamos cuáles son los eventos específicos de Sortables():

• start : Se activa al empezar a arrastrar un elemento. La función asociada puede recibir dos argumentos, el primero es el elemento de la lista activado, y el segundo la copia que se ha hecho de ella en la opcion clone

  onStart: function(elemento,clon){ /*código de la funcion*/ });

• sort : Se activa al entrar el elemento arrastrado en el espacio de otro elemento de la lista, y ser cambiado por éste. Al igual que el anterior, la función asociada puede recibir dos argumentos, el primero es el elemento arrastrado, y el segundo la copia del mismo hecha con la opcion clone

  onSort: function(elemento,clon){ /*código de la funcion*/ });

• complete : Se activa al soltar el elemento arrastrado. La función asociada puede recibir un argumento, que es el elemento arrastrado. No tenemos el segundo argumento "clon", ya que la copia desaparece al soltar el elemento arrastrado.

  onComplete: function(elemento){ /*código de la funcion*/ });

Métodos

La mayoría de los métodos están relacionados con la activación o desactivación del efecto de arrastre:

• detach : Este método hace desaparecer el efecto de arrastre de todos los componentes de la lista o listas, es decir lo bloquea. Por tanto todos los elementos pasan a ser estáticos. El método no tiene argumentos.

  milista.detach()

• attach : Método contrario al anterior. Los elementos se desbloquean y vuelven a ser movibles (pueden arrastrarse). El método no tiene argumentos.

  milista.attach()

• removeItems : Este método hace desaparecer el efecto de arrastre en aquellos elementos de la lista que pasamos como argumentos. Cada uno de los elementos que bloqueamos lo pasamos como un argumento distinto:

  milista.removeItems($("el1"),$("el2"),$("el3"));

  Aquí sólo los elementos de la lista con los "id" indicados se quedarán bloqueados.
• addItems : Método contrario al anterior. El método desbloquea los elementos indicados en caso de que estuvieran bloqueados. También, en caso de añadir un nuevo elemento, lo activa para formar parte de los elementos móviles.

  milista.addItems($("el1"),$("el2"),$("el3"));

• addLists : Este método añade una o varias listas al objeto, pudiendo incorporarse los elementos de las nuevas listas a la lista de objetos móviles. Como argumentos pasamos los elementos que contienen las nuevas listas.

milista.addLists($("lista2"),$("lista3"))

• removeLists : Método contrario al anterior. Las listas indicadas en el argumento quedarán bloqueadas, no pudiendo moverse sus elementos.

  milista.removeLists($("lista2"),$("lista3"))

• serialize : Este método devuelve una cadena de texto que contiene los "id" de los elementos en el orden en que los tenemos. Podemos pasar el método sin argumentos, o con un primer argumento que será un número, y que indica la lista en la que queremos buscar. (primera lista el numero 0).

  orden=milista.serialize(0);

  la variable orden="el1,el4,el2,el3". por ejemplo, despues de mover el elemento 4 a 2ª posición.

Ejemplo de la clase Sortables()

Vemos aquí a la derecha otro ejemplo de lista a la que le hemos aplicado la clase Sortables. Hemos aplicado también algunas opciones y eventos de esta clase, de manera que el ejemplo sea un poco más completo.

Empezamos por el código HTML. Aunque los elementos móviles son sólo una parte, mostramos aquí el código de la caja completa de la derecha:

<div id="caja1">
<h2>Colores</h2>
<div id="colores">
<p style="background-color: red">Rojo</p>
<p style="background-color: yellow">Amarillo</p>
<p style="background-color: blue">Azul</p>
<p style="background-color: green">Verde</p>
<p style="background-color: orange">Naranja</p>
<p style="background-color: maroon">Marrón</p>
</div>
</div>

Dentro del id="caja1", lo que realmente nos interesa es el id="colores", donde están los elementos de la lista reordenable.

Pero antes debemos dar forma y tamaño a los elementos del HTML mediante el código CSS:

#caja1 { width: 35%; margin: 1em 3em 1em 1em; border: 1px solid black; 
         float: right; height: 320px; }
#caja1 h2 { font: bold 18px verdana; color: navy; text-align: center; }
#caja1 p { font-size: 16px; padding: 10px; margin: 5px; }

Y ahora lo que convierte realmente esta lista en una lista reordenable es el código mootools-javascript, en el cual aplicamos la clase Sortables a la lista, incluyendo varias opciones y métodos:

miscolores=new Sortables($("colores"),{
   clone: true,
   opacity: 0.5,
   dragOptions:{
     container: $("colores")
     },
   onStart: function(el,clon){
     el.setStyle("border","5px double black");
     clon.setStyle("opacity",0.5);
     },
   onSort: function(el,clon){
     el.setStyle("border","5px double olive");
     clon.setStyle("border","5px double olive");
     },
   onComplete: function(el){
     el.setStyle("border","0");
     }
});

Comentamos brevemente el código: en primer lugar instanciamos el objeto. Como primer argumento pasamos el elemento que contiene la lista, y como segundo una serie de opciones que incluyen también eventos.

La opción clone: true permite que al arrastrar el elemento podamos ver también una copia del mismo. La opción opacity: 0.5 hace que el elemento (no la copia), se vea semitransparente mientras se está arrastrando.

Aplicamos también una serie de eventos. Con el evento onStart, al empezar a arrastrar ponemos un doble borde negro al elemento, y además hacemos la copia semitransparente. Con el evento OnSort al cambiarse por otro elemento, cambiamos el color del borde a "olive", y además también le ponemos el mismo borde a la copia. El evento onComplete Se produce al soltar el elemento. La copia desaparece al soltar el elemento, y lo que hacemos es restabecer el elemento a su estado original.

En la siguiente página veremos la construcción de tablas con mootools mediante una clase específica para ello.

Construir tablas

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com