Animate floating divs when they are moved

Question

Hi,

I have two columns, the one on the left is a grid of square, floated, jQuery draggable elements. The column on the right is a jQuery drop target. So when I drop a dropabble on the target it gets appended to the right column and hidden on the left, causing the grid to move to fill the space where that one just was.

Is there a way I can animate this using jQuery instead of an instant move?

Ok, I added some code. What I'm trying to say is that if you were to drag the green over, the ones after in the left column will move to fill the empty space. I'm wondering if the move they make by themselves (after one leaves) can be animated. Sorry if I'm being confusing, not sure how to explain this.

Thanks

One last bump if anyone has any ideas.

<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

Don't know if this is what you want, but I did make an attempt :)

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