¿Cómo usar las secciones arrastrables como en iGoogle?

Question

Al visualizar iGoogle, cada sección se puede arrastrar y soltar a cualquier otro lugar de la página y luego se guarda el estado de la página. Tengo curiosidad sobre cómo se hace esto, ya que me gustaría proporcionar esta funcionalidad como parte de una prueba de concepto.

ACTUALIZACIÓN

¿Cómo hacer para que el diseño ha cambiado a se guarda para la próxima carga? Voy a adivinar que esto es una especie de cookie?

Answer 1

Cualquier marco de cliente actualizado dará ese tipo de funcionalidad.

• jQuery
• YUI
• GWT
• Prototype

Sólo por nombrar algunos ...

En cuanto a la "salvar" (persistencia, si se quiere) de los datos, esto depende del back-end de su sitio, pero esto generalmente se hace a través de una llamada asíncrona al servidor que guarda el estado en un DB (generalmente).

Answer 2

Es increíblemente simple con jQuery. Consulte this blog entry sobre el tema.

Edit: Me perdí el "estado de la página se guarda" parte de la pregunta cuando contesté. Esa parte variará enormemente en función de cómo se estructura la aplicación. Necesita almacenar el estado de la página de alguna manera, y eso dependerá del usuario. Si no le importa obligar al usuario a restaurar sus preferencias cada vez que borran su caché de cookies, puede almacenar el estado usando una cookie.

No sé cómo está estructurada su aplicación, así que no puedo hacer más sugerencias, pero almacenar una cookie en jQuery también es increíblemente simple. La primera parte de this blog entry le informa casi todo lo que necesita saber.

Answer 3

Odio a dar una respuesta corta en esto, pero hay varias docenas de diferentes bibliotecas de JavaScript que proporcionan este tipo de funcionalidad, y un montón de tutoriales y guías howto disponible en Google:

http://www.google.com/search?q=javascript+draggable

Algunos bibliotecas/frameworks de JavaScript es posible que desee echar un vistazo a:

• jQuery
• MooTools
• Yahoo User Interface (YUI) library

Answer 4

Un método no mencionado aquí es que a partir de ASP.NET en el marco 2.0, Microsoft dio a conocer algo que se llama WebParts que permitieron la construcción de controles que podrían ser arrastrados y colocados de la misma manera. Se suponía que este era un método fácil para que los usuarios crearan sus propios portales de estilo Web 2.0.

Answer 5

NETTUTS has a tutorial on putting one of these together with jQuery.