Alternativa al Gridster?

Question

Ho usato la biblioteca Gridster per un progetto che utilizza una griglia a più colonne drag-and-drop. Purtroppo, Gridster supporta solo Internet Explorer 9+. Ho bisogno di trovare una libreria semplice da usare simile che mi permetta di fare lo stesso usando IE8 e, se possibile, compatibile anche con IE7 e IE6.

Quindi, c'è qualche libreria Gridster simile là fuori per il vecchio-IE? Sto usando jquery in questo progetto, quindi una libreria basata su jQuery potrebbe essere anche grandiosa.

P.S. Ne ho trovato uno chiamato AnimaDrag, ma non è buono come Gridster, ed è un po 'brutto.

Answer 1

Questo è corretto, gridster supporta solo Internet Explorer 9+, Firefox, Chrome, Safari e Opera.
Se vuoi sostenerci il più vecchio browser IE (6+), perché non costruire funzionalità intorno jQuery draggable e jQuery droppable

Answer 2

Hai provato un polyfill per simulare le funzioni di data-set di gridster? http://www.orangesoda.net/jquery.dataset.html potrebbe essere una buona alternativa.

Answer 3

[N.B. Ho postato questa risposta nella pagina Github del progetto su una domanda simile che qualcuno aveva sollevato. Quindi controllare lì nel caso in cui questa risposta è stata corretta! - https://github.com/ducksboard/gridster.js/issues/74]

Ho passato gli ultimi giorni con un problema simile, anche se avevo solo bisogno del supporto IE8 (anche se sembra funzionare in IE7). Il problema era che il codice stava aggiornando la pagina correttamente, ma IE non avrebbe raccolto/valutato la sequenza di dati & modifiche al data-col mentre il mouse si muoveva. Ho provato diverse cose dalla soluzione di cui sopra, fino ad usare le librerie simili di modernizr & e, infine, cercando di legare all'evento IE solo "propertychange" senza successo.

sembra essere una limitazione IE8 che non sarà rivalutare un elemento che utilizza CSS Attributi mentre il mouse è premuto/spostamento. Tuttavia, rileva le modifiche di classe e in linea (motivo per cui è possibile trascinare il riquadro).

Pertanto l'unica soluzione che ho trovato con il tempo a disposizione era quello di aggiungere/rimuovere una classe falso nel codice ogni volta che i widget devono essere aggiornate utilizzando jQuery .toggle(). Così l'ho aggiunto nel codice quando l'anteprima e i widget sono stati passati nuovi dati-& attributi della riga dati. Ciò impone a IE8 di prendere il cambiamento e voilà l'anteprima funziona.

Ora sono sicuro che ci sia un (molto) meglio soluzione oltre a non utilizzare IE8 e non garantisce la compatibilità IE8, ma se sei bloccato allora si può trovare questo utile!

p.s. Dovevo solo preoccuparmi di IE8 +, IE7 sembrava essere a posto quando si utilizzava modernizr e plugin simili. Tuttavia non ho provato in IE6, ma dubito che avrebbe funzionato.

[EDIT]

A seguito del commento qui sotto ora ho caricato un esempio - anche se non ho potuto ottenere IE8 di bel gioco con JSFiddle. Così, l'esempio di farlo funzionare in IE8 è qui invece:

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

Ho incluso IE9.js che (soprattutto) aggiunge l'effetto di trasparenza per l'anteprima in questo caso.

La copia modificata del gridster.il file js è qui:

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

Essa comprende una serie di altre modifiche relative al ridimensionamento dei widget. Tuttavia, se si desidera solo modifiche IE8, suppongo che la risposta migliore sia cercarla per menzionare ie8compat.

Al momento della stesura di linea cambia per IE8 sono:

• 717: compatibilità IE8 Aggiunta l'opzione
• 2054-2056: Aggiunta l'opzione .toggle al widget anteprima
• 2433-2435 : aggiunta l'opzione .toggle a qualsiasi widget salito
• 2488-2490: aggiunta l'opzione .toggle a qualsiasi widget spostato verso il basso

Answer 4

Ci sono anche shapeshift: https://github.com/McPants/jquery.shapeshift

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

che sono buone alternative ai Gridster. (ma nota che Gridly è solo per le piastrelle quadrate)

Modifica: Anche la confezione è molto interessante: http://packery.metafizzy.co/ . Tuttavia esso richiede una licenza commerciale per il progetto commerciale altrimenti:

Per i progetti non commerciali, personali, o open source e applicazioni, è possibile utilizzare Packery sotto i termini della GPL v3 licenza.

Edit 2: Questo può anche essere utile: https://github.com/uberVU/grid

Answer 5

Si può dare una prova per Gridstack: https://github.com/troolee/gridstack.js Si tratta di una prima versione, ma basata rigorosamente su gridster ed è anche sensibile.