unijimpe

Prototype Portal Class es una muy interesante librería Javascript que permite crear zonas arrastrables y que se pueden resposicionar al estilo de los portales como Netvibes o iGoogle. El uso es muy sencillo y además se puede personalizar la apariencia con el uso de CSS.

Esta librería hace uso de varias librerías como por ejemplo prototype, además de ello las librerías effects, builder y dragdrop de script.aculo.us. Finalmente una clase propia llamada portal.js la cual brinda todas las opciones para la creación del sistema arrastrable.

Creando el HTML
Lo primero luego de descargar las librerías necesarias, incluimos estos archivos en el head de nuestro HTML de la siguiente forma:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="builder.js"></script> 
<script type="text/javascript" src="dragdrop.js"></script>
<script type="text/javascript" src="portal.js"></script>

Creando las Regiones
Lo siguiente es crear las regiones sobre los cuales se podrán arrastrar y soltar los bloques con contenido, para ello creamos un div principal con tres columnas de la siguiente forma:

<div id="page">
  <div id="widget_col0"></div>
  <div id="widget_col1"></div>
  <div id="widget_col2"></div>
</div>

Luego definimos los estilos para estas zonas y las colocamos en tres columnas:

#page {
  margin: 10px auto;
}
#widget_col0 { 
  float:left;
  width: 30%;  
}
#widget_col1 {
  width: 50%;
  float:left;
}   
#widget_col2 { 
  float:left;
  width: 20%;  
} 

Creando los bloques arrastrables
Lo siguiente es crear una instancia de la clase que nos permitirá manejas los bloques arrastrables, esto se cuando se ha completado la carga de la página, para ello llamamos al método Xilinus.Portal donde le indicamos que todos los div dentro del div page seran las regiones:

function init() { 
   var  portal = new Xilinus.Portal("#page div");
}
Event.observe(window, "load", init);

Lo que sigue es agregar los bloques arrastrables, para ello se utiliza el método Xilinus.Widget, donde se puede asignar el titulo, contenido y columna donde se mostrará la región. Para nuestro ejemplo agregamos 3 bloques de contenido en la primera, segunda y tercera columna de los bloques definidos anteriormente.

function init() { 
   var  portal = new Xilinus.Portal("#page div");
   portal.add(new Xilinus.Widget().setTitle("titulo1").setContent("content1"), 0);
   portal.add(new Xilinus.Widget().setTitle("titulo1").setContent("content1"), 1);
   portal.add(new Xilinus.Widget().setTitle("titulo1").setContent("content1"), 2);
}
Event.observe(window, "load", init);

Personalizando la apariencia
Finalmente y para completar la creación de nuestro portal con regiones arrastrables es crear los estilos con el cual podemos modificar la apariencia de las regiones, para ello debemos crear los siguiente estilos.

.widget {
	/* Contenedor de la región */
}
.widget_nw {
	/* Titulo de la región */
}
.widget_w {
	/* Contenido de la región */
}
.widget_draggable {
	/* Zona arrastrable */
}
.widget_ghost {
	/* Bloque de destino */ 
}

Agregando los estilos necesarios y además creando los estilos para las zonas definidas al inicio podemos lograr un resultado muy agradable y al mismo estilo de Netvibes o iGoogle.

Dependo del estilo que deseas darle a tu sitio, puedes modificar los estilos, como ven sencillo y el resultado es muy bueno. Para finalizar les dejo los archivos fuente para la descarga.

Posts Relacionados

• Capxous: Autocomplete en AJAX
• Backbase: AJAX Framework
• Función dólar $() en Javascript
• PDFs con fondo utilizando PHP
• Lightbox: Imagenes Emergentes