Gridster :
Le plugin jQuery pour le drag and drop multi-colonnes
Le 2012-09-19 08:07:06, par vermine, Expert éminent sénior
Gridster
le plugin jQuery pour le drag and drop multi-colonnes.
Le plugin Gridster créé par Ducksboard permet de construire des grilles dont les éléments sont déplaçables (drag and drop) sur plusieurs colonnes. Vous pouvez même ajouter et supprimer dynamiquement des éléments de la grille. Il est compatible avec IE 9+, Firefox, Chrome, Safari, et Opera.
Pour l'utiliser, vous devez bien entendu ajouter le script à votre page :
Mais le plus important est la structure HTML. Tous les éléments peuvent être utilisés parce que Gridster est basé sur les attributs data-.
Gridster accepte un argument qui est en fait une série d'options :
Démo.
Téléchargement.
Documentation.
D'apès un article sur DailyJS. Cet article parle également de jQuery Builder.
le plugin jQuery pour le drag and drop multi-colonnes.
Le plugin Gridster créé par Ducksboard permet de construire des grilles dont les éléments sont déplaçables (drag and drop) sur plusieurs colonnes. Vous pouvez même ajouter et supprimer dynamiquement des éléments de la grille. Il est compatible avec IE 9+, Firefox, Chrome, Safari, et Opera.
Pour l'utiliser, vous devez bien entendu ajouter le script à votre page :
Code html : |
1 2 3 | <script type="text/javascript" src="libs/jquery.js"></script> <script type="text/javascript" src="jquery.gridster.js"></script> |
Mais le plus important est la structure HTML. Tous les éléments peuvent être utilisés parce que Gridster est basé sur les attributs data-.
Code html : |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="gridster"> <ul> <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li> <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li> <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li> <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li> <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li> <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li> </ul> </div> |
Gridster accepte un argument qui est en fait une série d'options :
Code javascript : |
1 2 3 4 5 6 7 8 9 | $(function(){ //DOM Ready $(".gridster ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [140, 140] }); }); |