Animer les divs flottants lorsqu'ils sont déplacés

Question

J'ai deux colonnes, celle de gauche est une grille d'éléments glissables carrés, flottants et jQuery. La colonne à droite est une cible drop jQuery. Donc, quand je laisse tomber un dropabble sur la cible, il est ajouté à la colonne de droite et caché sur la gauche, provoquant le déplacement de la grille pour remplir l'espace où elle se trouvait.

Existe-t-il un moyen de l'animer en utilisant jQuery au lieu d'un mouvement instantané?

Ok, j'ai ajouté du code. Ce que j'essaie de dire, c'est que si vous deviez faire glisser le green, ceux qui sont dans la colonne de gauche se déplaceront pour remplir l'espace vide. Je me demande si le mouvement qu'ils font eux-mêmes (après le départ) peut être animé. Désolé si je suis confus, je ne sais pas comment expliquer cela.

Merci

Une dernière bosse si quelqu'un a des idées.

<script type="text/javascript" src="jquery.min.js"></script> 
<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> 

<style> 

.leftColumn{ width: 300px; height: 500px; outline: 2px solid blue; margin: 50px; float: left;} 
.rightColumn{ width: 300px; height: 500px; outline: 2px solid green; margin: 50px; float: left;} 
.gridElement{ width: 70px; height: 70px; outline: 2px solid purple; margin: 10px; float: left;} 

</style> 

<div class="leftColumn"> 
    <div style="background-color: red;" class="gridElement"></div> 
    <div style="background-color: orange;" class="gridElement"></div> 
    <div style="background-color: yellow;" class="gridElement"></div> 
    <div style="background-color: green;" class="gridElement"></div> 
    <div style="background-color: blue;" class="gridElement"></div> 
    <div style="background-color: purple;" class="gridElement"></div> 
    <div style="background-color: gray;" class="gridElement"></div> 
    <div style="background-color: fuchsia;" class="gridElement"></div> 
</div> 

<div class="rightColumn"></div> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     $(".gridElement").draggable({revert: "invalid", containment: "window", helper: "clone", appendTo: "body"}); 
     $(".rightColumn").droppable({drop: function(event, ui) { 
      $(".rightColumn").append(ui.draggable); 
      ui.draggable.hide(); 
      $(".rightColumn .gridElement").show(); 
     }}); 
    }); 

</script> 

Answer 1

Je ne sais pas si c'est ce que vous voulez, mais je ne attentent :)

<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script src="jquery-ui-1.7.2.custom.js" type="text/javascript"></script> 
<style> 
    div.divDrag{width:150px;clear:both;border:1px blue dotted; 
       background-color:#eeeeff;margin-bottom:2px;} 
    div.divDrag span.spanHandle{background-color:#ffeeee;color:#ff0000; 
        display:block;} 
</style> 

<div id="divSource" style="border:1px dashed green;width:200px; 
      text-align:center;float:left;"> 
<div class="divDrag"><span class="spanHandle">Drag</span> 
    <p>hello world<br/>hello world<br/>hello world<br/></p></div> 
<div class="divDrag"><span class="spanHandle">Drag</span> 
    <p>hello world<br/>hello world<br/>hello world<br/></p></div> 
<div class="divDrag"><span class="spanHandle">Drag</span> 
    <p>hello world<br/>hello world<br/>hello world<br/></p></div> 
</div> 
<div id="divDest" style="border:1px dashed red;width:200px;height:600px; 
     position:absolute;left:400px;top:10px"> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".divDrag").draggable({handle:'span.spanHandle',revert:'invalid', 
      revertDuration:1000,     
      start:function(event,ui){$(this).find('p').css("display","none");}, 
      stop:function(event,ui){ 
       $(this).animate({width:'150px'},500); 
       $(this).find("p").css("display","block"); 
       $("#divDest").effect('highlight',500);}}); 
     $("#divDest").droppable({accept:'.divDrag'}); 
    }); 
</script> 

Answer 2

Je n'ai pas utilisé dans ce contexte précis, mais il semble que le Quicksand plug-in peut faire l'affaire:

jQuery Quicksand plugin