Pues bueno en xilinus que ya estan acostumbrandonos a sacar clases basadas en prototype bastante completas y de muy buena calidad ahora sacan esta Prototype Portal Class.

Aqui les dejo el ejemplo de como aplicarlo:

Primero el HTML facil y sencillo:

<div id="page"><div id="widget_col_0"></div><div id="widget_col_1"></div>

<div id="widget_col_2"></div>

</div>

Toca el archivo CSS aun mas facil:

#page {margin: 10px auto;}

#widget_col_0 {

float:left;

width: 30%;

}

#widget_col_1 {

width: 50%;

float:left;

}

#widget_col_2 {

float:left;

width: 20%;

}

Ahora iniciamos la clase:

var  portal = new Xilinus.Portal("#page div")

Y por ultimo añadamos las cajitas (widgets) =P

portal.add(new Xilinus.Widget(), 0)// Or with title and contentportal.add(new Xilinus.Widget().setTitle("Widget Title").setContent("bla bla bla"), 1);

Eso es todo nada dificil pero ahora quieres mas estilo mas bonito mas funciones aqui les pongo mas de esto:

• url: Url a la que se hace una peticion despues de mover un widget (default null, no requests)
• onOverWidget: Un evento para ejecutar cuando el mouse este sobre el widget (default null)
• onOutWidget: Evento para cuando el mouse ya quite de encima del widget (default null)
• onChange: Evento para ejecutar algo cuando termines de mover el widget (drag & drop) (default null)
• onUpdate: Evento para ejecutar cuando termines de ejecutar un accion drag & drop (default null)
• removeEffect: Remueve un efecto animado (sin efectos por default)

Muchas funciones no lo creo se podrian hacer mas pero bueno aqui lo basico para crear este portal:

• add(widget, columnIndex): para añadir un nuevo widget .
• remove(widget): remueve un widget.
• serialize(): Convierte un string a parametros para el request de lajax.

Batante bueno el tip no creen? puede ser muy util creo ya se donde lo aplicare, ya pueden hacer su propio startup bueno casi falta mucho jeje pero lo basico ya lo tiene un poquito de CSS y JS es mas que suficiente.

Ver ejemplo / Descargar Script widgets.js