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: 14

Visitas el mes pasado: 59

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 (III)

Ejemplos de arrastre

imagen mootools

Introducción

Veremos en esta página cómo realizar algunos de los efectos más comunes de arrastre de elementos. No sólo consiste en enganchar y soltar un elemento, sino que además pondremos ciertas condiciones.

Para poder entender los ejemplos que pondremos a continuación es imprescindible haber visto las dos páginas anteriores de este manual, donde explicamos los mecanismos para el arrastre de elementos. Además utilizaremos otras clases y métodos de mootools vistos en los anteriores manuales de motools (mootools(I) y mootools(II)).


Mover dentro de un contenedor

Aquí se trata de crear un elemento que pueda arrastrarse, pero sólo dentro del contenedor en el que está, sin que pueda salir de él. En el ejemplo ponemos dos elementos dentro de un contenedor, los cuales pueden arrastrarse sólo dentro del contenedor.

el ejemplo es sencillo, ya que sólo usamos la clase Drag.move() con la opción container.

Veamos en primer lugar el código HTML:

<div id="cont1">
   <div id="caja1"></div>
   <div id="caja2"></div>
</div>

En el código hay dos subelementos dentro de otro elemento, El código CSS se encargará de dar posición y tamaño a estos elementos, de darles color y otros aspectos del estilo, como el cursor, que indica que el elemento se puede mover:

#cont1 { float: right; width: 40%; height: 250px; margin: 1em 3em 1em 1em;
         border: 1px solid black; position: relative;   }
#caja1 { width: 70px; height: 70px; background-color: red; position: relative;
         margin: 10px; float: left; cursor: move;  }
#caja2 { width: 70px; height: 70px; background-color: blue; position: relative; 
         margin: 10px; float: left; cursor: move; }


Observa que tanto los elementos que arrastramos como el contenedor deben estar posicionados, es decir con la propiedad position con valor relative, absolute o fixed.

Vemos el ejemplo aquí a la derecha. Sin embargo falta todavía por ver el código javascript-mootools, para hacer que el ejemplo funcione.

En mootools-javascript utilizamos simplemente la clase Drag.Move() con la opción container. En esta opción indicamos el elemento contenedor de las cajas.

La diferencia entre la caja 1 (roja) y la caja 2 (azul), es que la caja roja incluye los márgenes, mientras que la azul no. Esto hace que la caja roja no pueda pegarse al borde del contenedor, mientras que la azul si. Conseguimos esto mediante la opción includeMargins. El código mootools-javascript aplicado es el siguiente:

ej1_1=new Drag.Move($("caja1"),{
   container: $("cont1")
   });
ej1_2=new Drag.Move($("caja2"),{
   container: $("cont1"),
   includeMargins: false
   });

De esta manera podemos conseguir que un elemento pueda ser arrastrado dentro de su contenedor.


Efecto cesta de la compra

Lo he llamado así porque es uno de los efectos más usados en este tipo de páginas. El mecanismo es el siguiente.

Al empezar a arrastrar el elemento se genera una copia del mismo que permanece en el lugar del elemento. El elemento, mientras se arrastra, se ve con una cierta transparencia. Si soltamos el elemento dentro del contenedor de "compra", éste se queda ahi, ocupando no el lugar donde lo dejamos, sino en un lugar determinado; lo que en realidad se queda es una copia, volviendo el original a su posicion inicial. Si el elemento se suelta fuera del contenedor de compra, éste vuelve a su posición inicial, sustituyendo a la copia que había en su lugar.

Alicates Martillo Llave inglesa Tenazas

Deja aquí tus productos

Vemos aquí el ejemplo en funcionamiento para hacernos una idea de cómo funciona. Cogemos los productos de la izquierda y los arrastramos al contenedor de la derecha.

Si soltamos el producto fuera del contenedor, éste no se guarda, y vuelve a ocupar su lugar.

Si soltamos los productos dentro del contenedor éstos se colocarán en el orden en que los hayamos elegido, uno detrás de otro, y no en el sitio en que los soltemos.

Evidentemente, una página con "cesta de la compra" tiene también otros mecanismos, sin embargo aquí vamos a centrarnos en éste efecto que tenemos aquí.

En primer lugar vamos a ver el código HTML: en él ponemos dos contenedores o "divs", el primero (productos) con los productos, y el segundo (cesta), es donde iremos dejando los productos:

<div id="productos">
<img src="objetos/alicates.gif" alt="Alicates" title="Alicates" id="pr1">
<img src="objetos/martillo.gif" alt="Martillo" title="Martillo" id="pr2">
<img src="objetos/llaveinglesa.gif" alt="Llave inglesa" title="Llave inglesa" id="pr3">
<img src="objetos/tenazas.gif" alt="Tenazas" title="Tenazas" id="pr4">
</div>
<div id="cesta" class="cesta">
<h2>Deja aquí tus productos</h2>
</div>

Vemos que al segundo contenedor le hemos puesto también el atributo class="cesta", ésto es para poder seleccionarlo como elemento "droppable".

Ahora veremos el código CSS. En él posicionamos los elementos indicados en el HTML. Aquí el código está puesto para que coincida en ésta página (márgenes, tamaños, etc). Los elementos que queremos arrastrar deben estar posicionados (absoluta o relativa). Si la posición es absoluta (como aquí), su contenedor debe estar en posición relativa, para tomar las medidas de referencia desde éste. Veamos el código CSS:

#productos { width: 100px; height: 275px; float: left; 
             margin: 1em 1em 1em 3em; position: relative; border: 1px solid black; }
#productos img { width: 100px; cursor: move; margin: 0; padding: 0; }
#pr1 { position: absolute; top: 0px; left: 0px ;margin: 0; padding: 0; }
#pr2 { position: absolute; top: 66px; left: 0px;;margin: 0; padding: 0; }
#pr3 { position: absolute; top: 133px; left: 0px;;margin: 0; padding: 0;  }
#pr4 { position: absolute; top: 200px; left: 0px; ;margin: 0; padding: 0;  }
#cesta { width: 330px; height: 275px; overflow: auto; float: right; 
         margin: 1em 3em 1em 1em; border: 1px solid black }
#cesta h2 { font: bold 15px verdana; color: navy; text-align: center; }

Ahora veamos el código javascript-mootools. Debemos haber cargado los archivos mootools-core.js y mootools-more.js en la página, y además el código lo pondremos dentro de la estructura "domready".

Para cada imagen que queremos arrastrar instanciamos un objeto de la clase Drag.Move(), en la cual podemos como elemento "droppable" el contenedor "cesta". Después mediante los eventos de esta clase indicaremos mediante funciones lo que queremos que ocurra al arrastrar el elemento dentro o fuera de la "cesta".

p1=new Drag.Move($("pr1"),{
    droppables: $$(".cesta")[0],
    onStart: alcoger,
    onEnter: alentrar,
    onLeave: alsalir,
    onComplete: alsoltar
    });
p2=new Drag.Move($("pr2"),{
    droppables: $$(".cesta")[0],
    onStart: alcoger,
    onEnter: alentrar,
    onLeave: alsalir,
    onComplete: alsoltar
    });
p3=new Drag.Move($("pr3"),{
    droppables: $$(".cesta")[0],
    onStart: alcoger,
    onEnter: alentrar,
    onLeave: alsalir,
    onComplete: alsoltar
    });
p4=new Drag.Move($("pr4"),{
    droppables: $$(".cesta")[0],
    onStart: alcoger,
    onEnter: alentrar,
    onLeave: alsalir,
    onComplete: alsoltar
    });

Hemos instanciado un objeto Drag.Move() para cada uno de los elementos que queremos mover. en cada un de ellos hemos marcado como elemento "droppable" el contenedor "cesta" donde queremos dejarlos. Después hemos puesto en cada uno cuatro eventos, a cada evento de estos le corresponde una función, que pondremos aparte y a la cual le hacemos su llamada.

Con onStart: alcoger, al coger el elemento para empezar a arrastrarlo, llamamos a la funcion alcoger, la cual vemos a continuación.

function alcoger(el,cont){
    entrar=0; //indicador de si el elemento está dentro o fuera de la "caja".
    if (el==$("pr1")){posX=0;} //buscamos la posición del elemento que movemos
    else if (el==$("pr2")){posX=66;} 
    else if (el==$("pr3")){posX=133;}
    else if (el==$("pr4")){posX=200;}
    clon1=el.clone(true); //hacemos una copia del elemento que arrastramos
    clon1.setStyle("position","absolute") //colocamos la copia en el lugar del original.
    clon1.setStyles({top: posX, left: 0})
    clon1.inject($("productos")); 
    el.setStyle("opacity",0.5); //ponemos transparencia al elemento que arrastramos.
		}

En los comentarios explicamos lo que vamos haciendo. Es decir, al "coger" el elemento creamos una copia del mismo que colocamos en lugar de éste. De esta manera mientras arrastramos el original, hay una copia que permanece en donde lo hemos cogido.

Ahora veamos las funciones alentrar y alsalir que se corresponden con los eventos onEnter y onLeave. Estos eventos se activan cuando el elemento arrastrado entra o sale del elemento "droppable", es decir en este caso del contenedor "caja".

function alentrar(){entrar=1; } //entrar=1, detectamos que el elemento está dentro de la caja
function alsalir(){entrar=0; } //entrar=0, detectamos que el elemento está fuera de la caja 

Es todo lo que necesitamos: saber cuándo el elemento está dentro o fuera de la caja, para que al soltarlo, podamos aplicarle un efecto u otro, según esté dentro o fuera.

La función alsoltar está asociada al evento onComplete y se produce al soltar el elemento arrastrado. Aquí ponemos dos posibilidades, soltar el elemento dentro de la caja, o soltarlo fuera. Veamos el código y lo que sucede en cada una de ellas:

function alsoltar(el,cont){
    el.setStyle("opacity",1); //volvemos a dar opacidad al elemento.
    if (entrar==0){ //Si soltamos fuera de la cesta ...
       clon1.destroy(); //destruimos la copia
       el.setStyles({top:posX,left: 0}) //colocamos el elemento en su posición original.
       }
    else { // Si soltamos dentro de la cesta ...
       clon1.dispose(); //quitamos la copia(sin destruirla)
       el.setStyles({top:posX, left:0}); //colocamos el elemento en su posición original
       clon1.setStyle("width",100); //posicionamos la copia (estilo css para clon1 en "cesta")
       clon1.setStyle("position","static");
       clon1.setStyle("float","left");
       clon1.inject($("cesta")) //colocamos la copia en la cesta
       }
    }

En cualquier caso volvemos a dar opacidad al elemento. Si soltamos el elemento fuera de la "cesta", éste vuelve a su sitio, sustituyendo a la copia que había en su lugar. Si lo soltamos dentro, también vuelve a su sitio, sustituyendo a la copia que habia en su lugar, pero también se crea una nueva copia dentro del contenedor "cesta", que se coloca dentro de la lista de copias que ya hemos dejado.


Efecto mapa

Lo he llamado así porque es el efecto de movimiento de arrastre que tienen los mapas de Google.

Cuando un elemento de grandes dimensiones (por ejemplo un mapa, o una foto), está dentro de otro elemento de dimensiones más reducidas, se produce un efecto de desbordamiento (overflow). En CSS esto se resuelve con la propiedad oferflow que puede poner o no barras de deslizamiento en los laterales del elemento, de no ponerlas puede mostrarse el elemento entero, desbordando a su contenedor, o sólamente el trozo del elemento que cabe dentro del contenedor, permaneciendo oculto el resto.

Con el efecto "mapa" el desplazamiento del elemento no se produce con barras de desplazamiento, sino arrastrando el elemento de manera que pueda verse la parte del mismo que no está visible.

Mapa de España

Vemos el ejemplo aquí a la derecha. Al arrastrar el cursor encima del elemento, éste se va desplazando para poder ver las partes ocultas.

Para conseguir el efecto el mapa está dentro de dos contenedores, el primero tiene las dimensiones del elemento visible. El segundo, dentro del primero, tiene como dimensiones las que nos permitan desplazar el elemento dentro del primer contenedor pudiendolo mostrar entero, y sin salirse de él al arrastrarlo. El resto se consigue con la clase Drag.Move(), poniendo en la opción container al segundo contenedor.

Las dimensiones del segundo contenedor: de ancho será el doble del ancho de la imagen, menos el ancho del primer contenedor; el alto será parecido: el doble del alto de la imagen, menos el alto del primer contenedor.

Recordemos que los métodos de mootools getSize y getScrollSize nos permiten saber los datos del ancho y alto de cualquier elemento, esté o no visible en su totalidad. Esto hace que podamos saber los datos anteriores que necesitamos.

Sabiendo esto veamos cuales son los códigos que hemos utilizado para el ejemplo anterior, empezamos por el HTML:

<div id="cont_fijo">
   <div id="cont_desp">
      <img id="img1" src="objetos/mapaespana.gif" alt="Mapa de España"  width="600" />
   </div>
</div>

La imagen que queremos mover está metida dentro de dos contenedores, ahora vamos a ver el código CSS para estos elementos:

#cont_fijo { float: right; width: 40%; height: 250px; border: 1px solid black;
             position: relative; margin: 1em 3em 1em 1em; overflow: hidden  }
#cont_desp { position: absolute; cursor: move; };
#img1 { position: absolute; }

Posicionamos los tres elementos, el primer contenedor como relativo, y el segundo y la imagen como absolutos. Sólamente indicamos el tamaño del primero, ya que el tamaño y posicion de los otros dos elementos se calculan con javascript-mootools. Observamos también cómo en el primer contenedor ponemos un desbordamiento overflow: hidden. Esto es esencial para que la imagen sólo pueda verse dentro de la ventana, y no tener barras de desplazamiento.

Vemos ahora el código javascript-mootools, donde calculamos tamaño y posición de los otros dos elementos, y después aplicamos la clase Drag.Move() para poder mover la imagen.

vx=$("cont_fijo").getSize().x; //ancho de la ventana
vy=$("cont_fijo").getSize().y; //alto de la ventana
tx=$("img1").getScrollSize().x; //ancho de la imagen
ty=$("img1").getScrollSize().y; //alto de la imagen
posDespX=-(tx-vx); //calculo posicion x del contenedor 2
posDespY=-(ty-vy); //calculo posición y del contenedor 2
despX=(tx-vx)*2+vx; //cálculo ancho del contenedor 2
despY=(ty-vy)*2+vy; //cálculo alto del contenedor 2
//aplicar estilo (posición y tamaño) a contenedor 2 con las medidas calculadas
$("cont_desp").setStyles({width:despX,height:despY,left:posDespX,top:posDespY})
//posicion inicial de la imagen dentro de la ventana 
$("img1").setStyles({top:ty-vy,left:tx-vx})
// objeto Drag.Move() para arrastrar la imagen dentro del contenedor 2.
mapa=new Drag.Move($("img1"),{
   container:$("cont_desp")
   });

El código viene comentado para saber qué estamos haciendo en cada paso. Como puede verse la clave está en el cálculo de la posición y tamaño del segundo contenedor, dentro del cual se mueve la imagen.






En la siguiente página veremos otro efecto relacionado con el arrastre, pero que es distinto. Veremos cómo poner una barra de control deslizante.

Control deslizante



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