Draggable & Droppable : Position automatique au drop

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:

---

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 :/

Bonjour,

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

Code:

---

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:

---

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' });

---

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 :)