Alternative à Gridster?
J'ai utilisé la bibliothèque Gridster pour un projet utilisant une grille multi-colonnes glissée. Malheureusement, Gridster ne prend en charge que Internet Explorer 9 + . Je dois trouver une bibliothèque similaire, simple à utiliser, qui me permette de faire de même avec IE8, et si possible également compatible avec IE7 et IE6.
Alors, y a-t-il une bibliothèque de type Gridster pour les anciens IE? J'utilise jquery dans ce projet, donc une bibliothèque basée sur jquery pourrait aussi être géniale.
P.S. J'en ai trouvé un appelé AnimaDrag , mais ce n'est pas aussi bon que Gridster, et c'est un peu mauvais.
Il existe également Shapeshift: https://github.com/McPants/jquery.shapeshift
et Gridly: http://ksylvest.github.io/jquery-gridly/
qui sont de bonnes alternatives à Gridster. (notez cependant que Gridly ne concerne que les carreaux carrés)
Edit: Packery est également très intéressant: http://packery.metafizzy.co/ . Cependant, une licence commerciale est requise pour un projet commercial, sinon:
Pour les projets non commerciaux, personnels ou open source et vous pouvez utiliser Packery selon les termes de la GPL v3 Licence.
Edit 2: Celui-ci peut également être utile: https://github.com/uberVU/grid
Vous pouvez essayer Gridstack: https://github.com/troolee/gridstack.js Il s’agit d’une version récente, mais basée strictement sur gridster et également réactive.
[N.B. J'ai posté cette réponse sur la page github du projet sur une question similaire que quelqu'un avait posée. Vérifiez donc au cas où cette réponse serait corrigée! - https://github.com/ducksboard/gridster.js/issues/74]
J'ai passé les derniers jours avec un problème similaire - bien que je n'aie besoin que du support IE8 (bien que cela semble fonctionner dans IE7). Le problème était que le code mettait à jour la page correctement mais IE ne prendrait/n'évaluerait pas les modifications apportées à la ligne de données et au col de données pendant le déplacement de la souris. J'ai essayé plusieurs choses de la solution ci-dessus, en passant par l'utilisation de bibliothèques modernizr & similaires et enfin par essayer de se lier à l'événement '<propertychange' IE uniquement, sans succès.
Une limitation d'IE8 semble ne pas permettre de réévaluer un élément utilisant des attributs CSS lorsque la souris est en bas/en mouvement. Cependant, il détecte les modifications de classe et en ligne (raison pour laquelle vous pouvez faire glisser la zone autour de vous).
Par conséquent, la seule solution que je pouvais trouver avec le temps disponible était d'ajouter/supprimer une fausse classe dans le code chaque fois que les widgets devaient être mis à jour à l'aide de jQuery .toggle (). Je l'ai donc ajouté dans le code lorsque l'aperçu et les widgets ont été transmis aux nouveaux attributs data-col & data-row. Cela force IE8 à prendre en compte les modifications et le travail de prévisualisation est effectué.
Maintenant, je suis sûr qu'il existe une solution (bien) meilleure en plus de ne pas utiliser IE8 et cela ne garantit pas la compatibilité avec IE8, mais si vous êtes bloqué, vous pourrez trouver cela utile!
p.s. Je n'avais qu'à me soucier de IE8 +, IE7 semblait bien fonctionner avec modernizr et des plugins similaires. Cependant, je n'ai pas essayé dans IE6 mais je doute que cela fonctionne.
[MODIFIER]
Suite au commentaire ci-dessous, j'ai maintenant téléchargé un exemple - bien que je ne puisse pas obtenir IE8 pour jouer Nice avec JSFiddle. Donc, l'exemple de travail dans IE8 est ici à la place:
https://s3-eu-west-1.amazonaws.com/707074webfiles/gridster/ie8test.html
J'ai inclus IE9.js qui (principalement) ajoute l'effet de transparence pour l'aperçu dans cet exemple.
La copie modifiée du fichier gridster.js est ici:
https://github.com/Grozzer/gridster.js/blob/master/dist/jquery.gridster.js
Il inclut un certain nombre d'autres modifications liées au redimensionnement des widgets. Toutefois, si vous souhaitez uniquement modifier IE8, je suppose que la meilleure solution consiste à rechercher la mention de ie8compat.
Au moment de la rédaction, les modifications de ligne pour ie8 sont les suivantes:
- 717: Option de compatibilité IE8 ajoutée
- 2054 - 2056: Ajout de l'option .toggle au widget de prévisualisation
- 2433 - 2435: Ajout de l'option .toggle à tous les widgets déplacés vers le haut.
- 2488 - 2490: ajout de l'option .toggle à tous les widgets déplacés vers le bas
Avez-vous essayé un polyfill pour simuler les fonctions d’ensemble de données de gridster? http://www.orangesoda.net/jquery.dataset.html peut être une bonne alternative.
C'est exact, gridster supporte Internet Explorer 9+, Firefox, Chrome, Safari et Opera.
Si vous souhaitez prendre en charge les anciens navigateurs IE (6+), pourquoi ne pas créer des fonctionnalités autour de jQuery draggable et jQuery droppable