Arrastrando con Moo

18/may/2007 4

Sigo jugando con este gran framework que ha demostrado ser mootools. En esta ocasión, y fusionando lo que se vió recientemente para Absolutamente sí, una vez más reciclaré ese layout para integrarle un efecto de moo, el que me permite crear ventanas arrastrables fácilmente (en el fondo, esa es la idea). Lo único diferente del HTML anterior, será sacar esa imagen con que jugamos el position (no la necesito ahora), cambiar el id="contenido" por una class="container" y agregarle una class al <h1> para que a través de éste searrastre nuestra ventana.

<div class="container">
     <h1 class="arrastra">Arrástrame desde aquí</h1>
     <p>Lorem ipsum dolor sit amet, consectetuer…</p>
     <p>Curabitur at sem. Vestibulum vel diam. Proin quis sapien ut leo faucibus eleifend…</p>
</div>

Además, debemos agregar el llamado a mootools.js y un script que ejecuta el efecto de arrastrado, además de un fade que lo hace más atractivo:

var indexLevel = 1;
function dragContainerInit(el){
     var fadeIn = new fx.Opacity(el.parentNode, {duration:300});
var dragContainerOptions = {
     handle: el,
     onStart: function(){
          var fadeIn = new fx.Opacity(el.parentNode, {duration:300});
          fadeIn.custom(1,.5);
          indexLevel++;
          el.parentNode.style.zIndex = indexLevel;
     }.bind(this),
     onComplete: function(){
          var fadeIn = new fx.Opacity(el.parentNode, {duration:300});
          fadeIn.custom(.5,1);
     }.bind(this)
};
     el.style.cursor = ‘move';
     el.parentNode.makeDraggable(dragContainerOptions);
}
     window.onload=function() {
          var draggables = document.getElementsBySelector(‘.arrastra’);
          draggables.each(function(el){dragContainerInit(el);});
     }

No viene al caso comentar todo este código, pero lo que sí me interesa es mencionarles donde pueden y deberían modificarlo. Si lo leen, pueden darse cuenta que se puede manejar la opacidad (fadeIn.custom(.5,1);), la duración de la transición de esta opacidad ({duration:300}), el tipo de cursor que se despliega (el.style.cursor = ‘move';), y finalmente la class del elemento que permite el arrastre (.arrastra).

Ver ejemplo

La sintaxis de moo, y en general de las demases librerías javascript existentes, son muy fáciles de entender y poder modificarlo a tu gusto. Jueguen un poco con ella y se darán cuenta de lo mucho que pueden lograr.

Comentarios

  1. kique [#]

    Me resulta con tu librería pero no con la q yo bajé del sitio de moo :S

  2. CSSLab Admin [#]

    enrique, si te fijas moo es bien completo pero especifico: desde su pagina (lucen lo mejor desde ahi) puedes bajar tu JS con lo q necesitas, optimizando tu archivo al maximo. tienes q saber muy bien lo q quieres. baja el completo y prueba con ese, sin compresion.

  3. RetroFOX [#]

    Esta bueno. Yo también estuve jugando con ventanas con mootools. Hice una serie de ejemplos de uso. Esta es la dire del último ejemplo http://www.cabezaderaton.com.ar/blog/mootools/vtndrag08/
    Hay un foro dedicado a MooTools en castellano.
    La dire es http://foro.mootools.com.ar
    Saludos. Nos vemos

  4. Convirtiendo Listas en Árboles ↝ CSSLab [#]

    […] Podemos también agregarle movimiento, un toggle() por ejemplo. Utilicen el framework que más les acomode, en este caso aprovecharé lo liviano de Mootools: […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab