2012-09-22 35 views
19

He utilizado la biblioteca Gridster para un proyecto que utiliza una cuadrícula de varias columnas de arrastrar y soltar. Lamentablemente, Gridster solo es compatible con Internet Explorer 9+. Necesito encontrar una biblioteca similar y fácil de usar que me permita hacer lo mismo con IE8, y si es posible también compatible con IE7 e IE6.¿Alternativa a Gridster?

Entonces, ¿hay alguna biblioteca similar a Gridster para los antiguos IE? Estoy usando jquery en este proyecto, por lo que una biblioteca basada en jquery también podría ser genial.

P.S. He encontrado uno llamado AnimaDrag, pero no es tan bueno como Gridster, y es algo malo.

+0

Se metió en este post mientras investigaba en gridster: ¿Puede usar gridster con la última versión de jQuery? (1.8.x). . . parece que deja de funcionar para algo superior a 1.7.2 - ¿puedes confirmarlo? –

+0

No, no pude. Empecé con v1.8.x pero tuve algunos problemas. Ahora estoy usando v1.7.2. – pmking

+0

Lo mismo aquí, pero el resto de mi portal usa el jQuery más reciente y queremos 'evitar el uso de .noConflict, pero a eso estoy recurriendo por ahora. Espero que gridster.net se actualice con frecuencia, se publique en su GitHub también ... –

Respuesta

0

Correcto, gridster es compatible con Internet Explorer 9+, Firefox, Chrome, Safari y Opera.
Si usted desea apoyar a los más viejos navegadores IE (6+), por qué no construir funcionalidades alrededor jQuery draggable y jQuery droppable

+2

Bueno, eso es exactamente lo que no quiero hacer ... Quiero decir, gridster ya es una completa y completa personalizable de arrastrar y soltar multi- cuadrícula de columna Es fácil de usar y no requiere mucha programación. Me preguntaba si había una biblioteca similar para las versiones anteriores de IE – pmking

0

¿Usted intentó un polyfill para simular las funciones de conjuntos de datos de gridster? http://www.orangesoda.net/jquery.dataset.html puede ser una buena alternativa.

+0

Bueno ... No estoy seguro de que use esa alternativa ... parece "lenta" y un poco "no-que- fácil "hacerlo ... si sabes a qué me refiero. – pmking

+0

orangesoda.net parece que ya no existe. –

5

[N.B. Publiqué esta respuesta en la página de github para el proyecto sobre una pregunta similar que alguien había planteado. ¡Entonces verifique allí en caso de que esta respuesta haya sido corregida! - https://github.com/ducksboard/gridster.js/issues/74]

Pasé los últimos días con un problema similar, aunque solo necesitaba soporte para IE8 (aunque parece funcionar en IE7). El problema era que el código está actualizando la página correctamente, pero IE no recogió/evaluó los datos de la fila & cuando el mouse se estaba moviendo. Intenté varias cosas desde la solución anterior, hasta el uso de las bibliotecas similares de modernizr & y, finalmente, tratando de enlazar al evento IE solo 'propertychange' sin éxito.

Parece ser una limitación de IE8 que no volverá a evaluar un elemento que está utilizando atributos CSS mientras el mouse está abajo/en movimiento. Sin embargo, detecta cambios de clase y en línea (por lo que puede arrastrar el cuadro).

Por lo tanto, la única solución que pude encontrar con el tiempo disponible fue agregar/eliminar una clase falsa en el código siempre que los widgets se actualicen usando jQuery .toggle(). Así que lo agregué al código cuando se pasaron la vista previa y los widgets nuevos datos col-& data-row attributes. Esto obliga a IE8 a recoger el cambio y listo para la vista previa.

Ahora estoy seguro de que hay una solución (mucho) mejor además de no usar IE8 y no garantiza la compatibilidad con IE8, pero si está atascado, ¡puede que le sea útil!

p.s. Solo tenía que preocuparme por IE8 +, IE7 parecía estar bien cuando usaba modernizr y complementos similares. Sin embargo, no lo he intentado en IE6, pero dudo que funcione.

[EDIT]

Siguiendo el comentario más abajo Ahora he subido a un ejemplo - aunque no pude conseguir IE8 jugar agradable con jsFiddle. Así que el ejemplo de que funcione en IE8 es aquí en su lugar:

https://s3-eu-west-1.amazonaws.com/707074webfiles/gridster/ie8test.html

He incluido IE9.js la que (en su mayoría) se suma el efecto de transparencia para la vista preliminar en este caso.

La copia modificada del gridster.js está aquí:

https://github.com/Grozzer/gridster.js/blob/master/dist/jquery.gridster.js

Sí incluye una serie de otros cambios relacionados con el cambio de tamaño de los widgets. Sin embargo, si solo quiere que IE8 cambie, entonces supongo que la mejor respuesta es buscar en IE8compat.

En el momento de escribir los cambios de formación para IE8 son:

  • 717: Compatibilidad IE8 ha añadido la opción
  • 2054-2056: Se ha añadido la opción .toggle al widget de vista previa
  • 2433-2435 : Se ha añadido la opción .toggle a ningún widget subió
  • 2488-2490: Se ha añadido la opción .toggle a ningún widget se movió hacia abajo
+0

Eh, no estoy del todo seguro de cómo me podría ayudar su respuesta. Es decir, es una respuesta informativa, pero en realidad no sé qué cambios has hecho para que funcione. Un JSFiddle puede ser útil en estos casos para mostrar lo que has hecho – pmking

+0

Tienes razón, lo siento. He tomado un tenedor del código y actualizaré con los cambios relevantes mañana. Intenté agregarlos de memoria (mala idea) pero obtuve un comportamiento extraño. Sin embargo, si miras aquí (https: // github.com/Grozzer/gridster.js/blob/master/dist/jquery.gridster.js) y busque ie8compat mientras tanto, es posible que tenga una mejor idea de lo que quiero decir. Así que espero ser más útil mañana :) – Grozzer

19

También hay Shapeshift: https://github.com/McPants/jquery.shapeshift

y Gridly: http://ksylvest.github.io/jquery-gridly/

cuales son buenas alternativas a Gridster. (Sin embargo, tenga en cuenta que Gridly es sólo para baldosas cuadradas)

Editar: Packery es también muy interesante: http://packery.metafizzy.co/ . Sin embargo, requiere una licencia comercial para proyecto comercial de otro modo:

Para proyectos no comerciales, personales o de código abierto y aplicaciones, se puede utilizar Packery bajo los términos de la licencia GPL v3 .

Edición 2: Este también puede ser útil: https://github.com/uberVU/grid

14

Puede darle una oportunidad a Gridstack: https://github.com/troolee/gridstack.js Es una primera versión, pero basa estrictamente en gridster y también es sensible.

+2

Todavía muy activo un año después y con un aspecto excelente. Gracias por señalar esto. –