CSSLab

Arrastrando con Moo

Tweet

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.