Estamos utilizando la versión 1.4 de jQuery y el plugin fancybox (usted también puede consultar nuestra mesa de luz CSS3 Tutorial Gallery, en la que también se utiliza fancybox).
PRIMER PASO - XHTML
El primer paso es crear la estructura XHTML necesario. El marcado en el archivo de demostración principal - demo.php es bastante sencillo, como se puede ver por sí mismo desde el código de abajo.
( demo.php )
Contiene el div principal, que contiene todas las notas y limita su movimiento durante el proceso de arrastre. El resto es generado dinámicamente por PHP después de ejecutar una consulta SELECT en la base de datos, y después de almacenar el resultado en los billetes de $ variables como se verá en el siguiente paso.
Si hace clic en la opción "Agregar una nota" en el sitio de demostración, usted verá que un formulario con una vista previa en vivo aparece. Esta funcionalidad es proporcionada por el fancybox, que obtiene add_note.html (que contiene el formulario) y lo muestra en un pop-up.
PASO 2 / ACCEDER