2011-03-31 17 views
11

Tengo elementos de diferentes tamaños que están dispuestos de alguna forma según una cuadrícula (como en la imagen de abajo) y quiero arrastrar y colocar correctamente esos elementos. ¿Hay algún complemento que pueda hacer eso? Sortable no lo hace correctamente ...Un tipo diferente de ordenable de jquery

EDIT: Por "propiamente" quiero decir que debe actuar normalmente (es decir, si arrastro y suelto el grande a la derecha debería reorganizarse inteligentemente). Tal vez sólo necesito ver a uno que hace lo que quiero y voy a hacer que haga cosas "correctamente"

sortable grid

EDIT: Si se mueve el gran bloque de la derecha (la forma en que debe ser similar)

sortable grid 2

EDIT: sólo quiero una manera de reorganizar un diseño de cuadrícula similar a como éste. Puedo aceptar otras ideas ..

+5

"correctamente" no está bien definido – davin

+0

Acaba de editarse para explicar :) –

+0

Aún no es lo suficientemente claro. ¿Qué se supone que debe pasar cuando "arrastras y sueltas el grande a la derecha"? Dé un ejemplo de dónde lo está dejando caer y cómo desea que aparezca el diseño. –

Respuesta

10

Probar isotope's re-layout. Pero asegúrese de mirar sus OTROS ejemplos en Isotope también. De todos modos ... esto debería darte un punto de partida saludable.

+2

muy bueno, gracias por el enlace. – Kelly

+0

Amigo, IMPRESIONANTE :) –

3

Eche un vistazo a Geckoboard, que (creo) usa jQuery Sortable para lograr el diseño de cuadrícula de arrastrar y soltar.

+0

algún consejo sobre cómo lo hacen? – AlfaTeK

10

En Ducksboard acabamos de lanzar gridster.js, un plugin jQuery que hace posible construir diseños arrastrables desde elementos que abarcan múltiples columnas. Una demostración en vivo se puede ver en gridster.net.

Lo estamos utilizando para organizar widgets de diferentes tamaños en nuestros paneles. ¡Espero que te guste!

+0

¿Por qué los espectadores de dicho diseño quieren arrastrar cosas? ¿Esto es para una aplicación de mesa de luz o un juego? ¿O esto es para una alternativa de geckoboard para mostrar precios de valores, etc.? Curiosos ... – Systembolaget

1

Aquí hay un simple way to do it usando Isotope y jQuery UI.

+2

Todas las cajas son iguales en su ejemplo –

+0

así que cambie ellos :) crear una nueva clase (o varios) con diferentes dimensiones y aplicarlos al azar a algunos de los 'li's. – Jason

Cuestiones relacionadas