2009-01-09 41 views
8

Estoy buscando un script que me permita tener una grilla de divs que se puedan arrastrar (se usa para organizar image thumbnails). Entonces, cuando un div se arrastra sobre otro, los divs cambiarían para crear un punto vacío para soltar el div.Javascript Arrastrar y soltar cuadrícula

Sé que jQuery tiene una lib de arrastrar y soltar, pero no parece permitir la funcionalidad que necesito (ajustar a una cuadrícula y mover los divs que lo rodean).

¿Alguien sabe de un script o framework que tiene lo que necesito?

Gracias!

Respuesta

9

Eche un vistazo a JQuery y más específicamente, JQuery UI ya que tiene "arrastrable", "desplegable", "clasificable", y una variedad de otros componentes complejos.

Aquí está el ejemplo específico de drag and drop grid que está buscando.

+2

Eso no es una cuadrícula que es una lista se puede ordenar. Si bien podría convertir una lista en un objeto como una cuadrícula, no es lo mismo – thenetimp

+3

A menos que esté usando una tabla, una cuadrícula es solo una serie de elementos que coinciden con un conjunto de títulos. De acuerdo con los enlaces dados, diría que la respuesta sigue en pie. Especialmente dado el hecho de que lo he usado para resolver el problema exacto del que el OP está hablando varias veces. – Soviut

4

Tal vez mi biblioteca REDIPS.drag será útil. Utiliza la tabla (uno o muchos) como una cuadrícula de caída. Cualquier elemento DIV con clase = "arrastrar" podrá arrastrar a través de las celdas de la tabla. Biblioteca también tiene la opción de escribir código JS para eventos como: gota, clonar, borrar, mover ... es flexible y fácil de usar, aquí está el enlace a la página de demostración:

http://www.redips.net/my/preview/REDIPS_drag/

+0

Por favor mencione en sus respuestas que está afiliado con el producto que está recomendando. Como se menciona en [Preguntas frecuentes] (http://stackoverflow.com/faq#promotion). –

+0

Esta regla me era desconocida y he corregido mi respuesta, ¡gracias! – dbunic

+0

@dbunic, muchas gracias! Esto es exactamente lo que estaba buscando: D No sé mucho sobre JS, pero con su lib debería ser capaz de hacer todo lo que necesito :) ¡Impresionante! –

6

No específicamente para las imágenes , pero ciertamente podría usarse de esa manera, pero http://gridster.net/ se ve bastante bien para poder arrastrar y soltar elementos y hacer que se reorganicen para ajustarse.

+0

¿funciona para usted en cromo? para mí solo funciona en ie – daniel

2

Otra opción sería jQuery.Shapeshift; es muy parecido a Gridster.js, pero más adaptable.

+1

Lástima que ambos parecen estar en ese estado semiabandonado que a menudo se ve en github :( – boxed