Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Gridster :
Le plugin jQuery pour le drag and drop multi-colonnes

Le , par vermine

0PARTAGES

1  0 
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 :

Code html : Sélectionner tout
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 : Sélectionner tout
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 : Sélectionner tout
1
2
3
4
5
6
7
8
9
  
$(function(){ //DOM Ready 
  
    $(".gridster ul").gridster({ 
        widget_margins: [10, 10], 
        widget_base_dimensions: [140, 140] 
    }); 
  
});


Démo.
Téléchargement.
Documentation.
D'apès un article sur DailyJS. Cet article parle également de jQuery Builder.

Une erreur dans cette actualité ? Signalez-le nous !