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

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.



MooTools3 (I)

Arrastrar

Introducción a la tercera parte

En esta tercera parte del manual de Mootools seguimos viendo las posibilidades del archivo mootools-more.js Veremos algunos efectos no incluidos en la clase Fx y otras opciones.

Todos los efectos que veremos en esta tercera parte del manual de mootools requieren que hayamos cargado los archivos mootools-core.js y mootools-more.js en la página.

Concepto de arrastre

Aunque es probable que ya sepamos en qué consiste arrastrar un elemento, no está de más recordarlo. Para arrastrar un elemento el usuario pulsa el botón izquierdo del ratón sobre él (coge el elemento), y con el botón pulsado, mueve el ratón. El elemento debe moverse con el cursor, cambiando su posición a la vez que cambia la posición del ratón. Cuando el usuario deja de pulsar sobre el elemento, el arrastre se para (suelta el elemento), y el elemento se queda en el sitio que ha quedado el cursor.

El efecto de arrastre se utiliza en muchos programas, con mootools también podemos tenerlo en una página web. Este efecto es uno de los más buscados por los diseñadores para poder hacer páginas dinámicas.

La clase Drag

La clase Drag() de mootools permite arrastrar un elemento por toda la página. Es tan sencillo como instanciar un objeto de la clase Drag:

arrastre=new Drag($("elemento"),{[opciones]});

Creamos un nuevo objeto de la clase Drag, y pasamos como primer argumento el elemento que queremos arrastrar. El segundo argumento es opcional, y consiste en una serie de opciones que veremos más adelante.

Para poder arrastrar el elemento éste debe estar posicionado (en CSS) como absoluto, relativo o fijo, es decir tiene que tener la propiedad CSS position con uno de estos valores: absolute, relative, fixed.

Hemos hecho un ejemplo simple, en el que creamos una caja, La posicionamos como "relativa", y después le instanciamos el objeto Drag. El ejemplo puedes verlo en una página aparte:

Ejemplo 1 - Arrastrar

Si has visto esta página verás que el cuadrado azul puede arrastrarse por toda la página. El código de la página es simple y puedes verlo en el siguiente enlace:

Código de Arrastrar - 1

Si te fijas un poco en el código verás que simplemente con instanciar el objeto conseguimos que el elemento pueda ser arrastrado por toda la página.

Opciones

Con las opciones no sólamente conseguimos controlar mejor el elemento de arrastre, sino que también mejoramos la presentación del mismo y su control en la página. Estas son las siguientes:

grid: (num)

Como valor pasamos un número que indica el número de píxeles que se desplaza a la vez el elemento entre un movimiento (fotograma) y el siguiente.

handle: (elemento)

Indica el elemento sobre el que debemos pulsar para poder arrastrar. Por defecto es el mismo elemento que arastramos, pero podemos poner un sub-elemento del mismo. Por ejemplo en una caja en la que tenemos un título y un texto, podemos hacer que la caja se arrastre sólo si la cogemos del título.

invert: (booleano)

Por defecto el valor es false. El valor true hace que el elemento se desplace en sentido contrario al que llevamos el ratón. Por tanto con el valor true el elemento ya no queda encima del cursor, sino que si llevamos el ratón hacia la derecha, el elemento se desplazará hacia la izquierda. Lo mismo ocurre con arriba y abajo.

limit: {x:[0,500],y:[0,300]}

indica los límites en los ejes x e y en los cuales el elemento puede arrastrarse. El valor de esta opción lo escribimos siempre entre llaves. Dentro de las llaves podemos poner un eje o los dos separados por una coma. La forma de escribirlo es {x:[min,max]} (un eje) o {x:[min,max],y:[min,max]} (los dos ejes), donde "x" o "y" es el eje, y "min" y "max" son los números que indican en píxeles el límite mínimo y el máximo para cada eje.

Como referencia de las coordenadas se toma el elemento contenedor de la caja que arrastramos cuando éste tiene una posicion absoluta o relativa. En otro caso se toma como referencia el propio documento (la página). En el elemento que arrastramos tomamos como punto de referencia su esquina superior izquierda (incluidos los márgenes).

snap: (num)

Indica el número de píxeles que se desplazará el ratón antes de empezar a arrastrar el elemento. El proceso es el siguiente. Pulsamos sobre el elemento. Con el ratón pulsado empezamos a moverlo. Hasta que no lo hemos desplazado un número (snap) de píxeles, el elemento no se engancha para poder ser arrastrado. Este número por defecto es 6, pero podemos cambiarlo con esta opción.

unit: ("cadena")

Indica mediante una cadena de texto la unidad de medida que utilizaremos en las distintas opciones. Por defecto es "px" (pixel), pero podemos cambiarla por otras. La forma de escribirlas es la misma que para el código CSS.

style: (booleano)

Por defecto es true. Indica si se pueden o no modificar las propiedades de estilo del elemento (con false no se pueden modificar).

preventDefault: (booleano)

Indica si se aplica o no el método preventDefault al elemento. Por efecto es false (no se aplica). ver más sobre este método en El objeto event (mootools I -IX)

stopPropagation: (booleano)

Indica si se aplica o no el método stopPropagation al elemento. Por efecto es false (no se aplica). ver más sobre este método en El objeto event (mootools I -IX)

Eventos

Podemos aplicar a los objetos de la clase Drag() una serie de eventos especiales, que están relacionados con el hecho del arrastre. Éstos registran los comportamientos del usuario en la maniobra de arrastre (por ejemplo, cuando se pulsa el ratón, cuando se empieza a arrastrar, o cuando se acaba).

Funcionan igual que los eventos normales, con la diferencia de que se aplican sobre el objeto Drag(), por ejemplo, creamos un objeto Drag.

arrastre1=new Drag($("caja1"));

Le aplicamos un evento que veremos más adelante, por ejemplo start:

arrastre1.addEvent("start",function(){ /* acciones */ });

Con este evento hacemos que las acciones de la función se pongan en marcha cuando el usuario empieza a arrastrar el elemento.

Los eventos que podemos aplicar a un objeto Drag() son los siguientes:

• start : Registra el momento en el que el elemento arrastrado comienza a moverse.
• beforeStart : Registra el momento en el que el usuario pulsa el ratón sobre el elemento (aunque después no lo mueva).
• drag : Se produce en cada uno de los movimientos del elemento mientras se arrastra.
• complete : Se produce cuando se ha completado el arrastre, es decir cuando el usuario, después de arrastrar, deja de pulsar el botón.
• snap : Se produce cuando una vez empezado a mover el ratón para arrastrar, se sobrepasa la zona indicada en la opción snap (en la práctica tiene el mismo efecto que start).
• cancel : Se produce cuando se cancela la posibilidad de arrastre. Esto se hace mediante el método detach que veremos más adelante.

También podemos indicar los eventos al instanciar el objeto Drag(), como opciones del mismo, en este caso los eventos los pondremos con el prefijo on :

efecto1=new Drag(($"caja1"),{
limit: {x:[0,500],y:[0,300]},
handle: $("titulo_caja1"),
onStart: function() { */ efectos al empezar */ },
onComplete: function() { */efectos al acabar*/ }
});

Métodos

Tenemos dos métodos que podemos aplicar al objeto Drag(). Estos permiten activar o desactivar el arrastre del elemento.

.detach()

Desactiva el arrastre del elemento. Después de aplicar este método el elemento ya no se puede arrastrar.

arrastre1.detach();

.attach()

Activa el arrastre del elemento. Después de aplicar este método el arrastre del elemento queda activado en caso de que estuviera desactivado.

arrastre1.attach();

Ejemplo de página con arrastres.

Hemos creado una página para comprobar el funcionamiento de la clase Drag, en la que podemos ver varios elementos que pueden ser arrastrados. Ésta la podemos ver el el siguiente enlace:

Ejemplo 2 - Arrastre

En la página hay dos elementos que podemos mover mediante arrastre. Cada uno de ellos va asociado un objeto Drag, con varias opciones y varios eventos.

El código para realizar la página anterior puedes varlo en el siguiente enlace:

Código del ejemplo 2

---

En la siguiente página seguimos viendo el arrastre de elementos en la página.

Arrastrar(II)

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