Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 25

Visitas el mes pasado: 37

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual mootools : desarrollo web
Desarrollo Web
Manual de MooTools
lawebera.es
The MooToorial
mootoorial.com
Mootools para principiantes
brainbol.com
docs/core/ página oficial mootools
mootools.net
docs/more/ página oficial mootools
mootools.net

Donativos

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




MooTools3 (II)

Arrastrar(II)

imagen mootools

La clase Drag.Move()

Como subclase de la clase Drag tenemos la clase Drag.Move() con la cual podemos concretar aún más lo que podemos hacer al arrastrar un elemento. La clase Drag.Move() es una ampliación de la clase Drag().

Con Drag.Move() y algo de lo visto en este manual anteriormente, podemos realizar algunos efectos de arrastre.

Lo primero que debemos hacer para utilizar esta clase es instanciar un objeto de la misma:

arrastre1=new Drag.move($("elemento"),{[opciones]});

Como primer argumento pasamos el elemento que queremos arrastrar, como segundo una serie de opciones que veremos a continuación.

Al igual que con la clase Drag(), el objeto que queremos mover mediante el arrastre tiene que tener en CSS un posicionamiento que no sea static, es decir tenemos que aplicarle la propiedad position con el valor relative, absolute o fixed.


Opciones de Drag.Move()

Las opciones que podemos pasar en el segundo argumento son las mismas que para la clase Drag(), y ademas las siguientes:

Recordemos que además de estas opciones tenemos también las opciones de la clase Drag(), vistas en la página anterior . estas son: grid, handle, invert, limit, snap, unit, style, preventDefalult, stopPropagation.


Eventos de Drag.Move

Al ver la clase Drag() vimos que a los objetos de esta clase se les puede aplicar una serie de eventos específicos. La clase Drag.Move también admite estos eventos, y además tiene también los siguientes eventos relacionados con los elementos "droppables" indicados en la opción droppable:

Además las funciones asociadas a los eventos pueden llevar varios argumentos:

arrastre1=new Drag.Move($("element"),{
droppables: $$(".cajas")
});

arrastre1.addEvent("enter",function(el,drop,event){
/*.. código de la funcion.. */ });

En la función que hemos creado para el evento hemos puesto tres argumentos. El primer argumento el, es el mismo elemento que arrastramos, en este caso $("elemento").

el segundo argumento drop es el elemento de los "droppables" en el que ha entrado o salido el elemento arrastrado.

El tercer argumento es el objeto event, ya visto en javascript, y que nos da información sobre cualquier evento.

Recordemos los eventos de la clase clase Drag(). Estos son: start, beforeStart, drag, complete, snap, cancel. Estos eventos, vistos en la página anterior, también pueden aplicarse a la clase Drag.Move(); y además en su función asociada podemos poner un primer argumento, que será el objeto arrastrado.

En los eventos start y complete, podemos pasar además un segundo argumento que será el objeto event de javascript. Esto es así tanto si utilizamos estos eventos con la clase Drag(), como con Drag.Move().

El evento drag, cuando se utiliza con Drag.Move(), en su función asociada podemos utilizar tres argumentos: el primero es el objeto arrastrado, el segundo el objeto "droppable" en el que entra o sale, y el tercero el objeto "event" de javascript.

Al igual que con la clase Drag(), podemos poner los eventos al instanciar el objeto. Para ello debemos pasarlos como opciones con el prefijo on delante y su primera letra en mayúsculas:

arrastre=new Drag.Move($("elemento"),{
container: $("cont"),
droppables: $$(".cajas"),
onStart: function(el){ /*..codigo..*/ },
onEnter: function(el,drop){ /*..codigo..*/ },
onLeave: function(el,drop){ /*..codigo..*/ },
onComplete: function(el){ /*..codigo..*/ }
});

En este ejemplo instanciamos un objeto de la clase Drag.Move(). Indicamos mediante $("elemento") el elemento que queremos arrastrar, y después ponemos varias opciones.

Con la opción container delimitamos el espacio en el que el objeto arrastrado puede ser movido. Solamente puede moverse dentro del elemento indicado.

La opción droppables indica una serie de elementos en los que al entrar o salir de ellos el elemento arrastrado, podemos aplicar unos eventos para cambiar algunas cosas en la página.

Las demás opciones son la aplicación de los eventos. Es decir al enganchar (onStart), al soltar (onComplete), al entrar en un elemento "droppable" (onEnter), o al salir de él (onLeave), podemos cambiar las condiciones del elemento arrastrado, del elemento "droppable", y de otros elementos de la página.






Seguiremos viendo en la siguiente página el arrastre de elementos con Mootools, vendo algunos casos prácticos:

Ejemplos de arrastre



Manual de Mootools (III Avanzado)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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