Discussion :

[MimiWoOlf]

Bonjour tout le monde

J'ai deux blocs, un à gauche et un à droite.
A gauche mon bloc contient plein de div draggable.
A droite mon bloc est vide.

Je veux prendre mes div de gauche pour les mettre dans mon bloc de droite.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
// Toutes mes divs draggable
$(".div_draggable").draggable({
     revert: "invalid"
});
 
// Mon bloc de droite qui contiendra mes divs
$("#droppable" ).droppable();

Donc simplement, je prends ma "div_draggable", et je la dépose dans mon bloc "droppable". Tout fonctionne parfaitement sauf que j'ai une multitude de "div_draggable" et j'aimerai que ces div se "reclassent" automatiquement dans mon bloc.
Je ne veux pas qu'elles restent là où je les dépose.
A la base elles sont toutes les unes à la suite des autres avec un css inline-block, ou même float left peut importe ^^

Je ne sais pas si je suis assez claire, j'ai parcouru plein d'exemple en jquery mais je ne suis jamais tombé sur ce cas :/

[Toufik83]

Bonjour,

tu peux le faire seulement avec du css et le callback drop :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#droppable{width:100%;min-height:200px;background-color:green;overflow:hidden;}
.div_draggable{width:100px;height:100px;background-color:yellow}
#droppable .div_draggable{display:inline-block;float:left;top:0 !important;left:0 !important; margin: 5px 5px}

Plus l'utilisation du callback drop de $ui.droppable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$("#droppable").droppable({
  drop: function(event, ui) {
    $(this).append(ui.draggable);//ajouter l'élément dragué à #droppable
  }
});
 
$(".div_draggable").draggable({
  revert:'invalid'
});

[MimiWoOlf]

Merci pour ta réponse !

Du coup j'ai utlisé sortable au lieu de draggable et je n'ai rien à faire en css ou via un evenement de drop. Tout se fait automatiquement ^^

Merci tout de même