Jquery 移动浮动div时设置其动画

我有两列，左边的一列是正方形的网格，浮动的，jQuery可拖动的元素。右边的列是jQuery的删除目标。因此，当我在目标上放置一个dropabble时，它会附加到右列并隐藏在左列，导致网格移动以填充刚才的空间

有没有一种方法可以使用jQuery而不是即时移动来设置动画

好的，我添加了一些代码。我想说的是，如果你把绿色拖过来，左列后面的那些将移动以填充空白。我想知道他们自己（在一个人离开后）所做的动作是否可以动画化。对不起，如果我弄糊涂了，我不知道该怎么解释

谢谢

如果有人有任何想法，最后一次碰撞

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

.leftColumn{宽度：300px；高度：500px；轮廓：2px纯蓝色；边距：50px；浮点：左；}
.rightColumn{宽度：300px；高度：500px；轮廓：2px纯绿色；边距：50px；浮点：左；}
.gridElement{宽度：70px；高度：70px；轮廓：2px纯紫色；边距：10px；浮点：左；}
$（文档）.ready（函数（）{
$（“.gridElement”）.draggable（{revert:“invalid”，containment:“window”，helper:“clone”，appendTo:“body”}）；
$（“.rightColumn”）.dropable（{drop:function（事件，ui）{
$（“.rightColumn”）.append（ui.draggable）；
ui.draggable.hide（）；
$（“.rightColumn.gridElement”）.show（）；
}});
});

不知道这是否是您想要的，但我确实尝试过：）

div.divDrag{宽度：150px；清除：两个；边框：1px蓝点；
背景色：#eeeeff；页边距底部：2px；}
div.divDrag span.spanHandle{背景色：#ffeee；颜色：#ff0000；
显示：block；}
拖曳
你好世界
你好世界
你好世界

拖曳
你好世界
你好世界
你好世界

拖曳
你好世界
你好世界
你好世界

$（文档）.ready（函数（）{
$（“.divDrag”）.draggable（{handle:'span.spanHandle'，revert:'invalid'，
持续时间：1000，
start:function（event，ui）{$（this.find（'p'）.css（“display”，“none”）；}，
停止：功能（事件、用户界面）{
$（this.animate（{width:'150px'}，500）；
$（this.find（“p”）.css（“display”、“block”）；
$（“#divDest”）.effect（'highlight'，500）；}）；
$（“#divDest”）.dropable（{accept:'.divDrag'}）；
});

我并没有在这个确切的上下文中使用它，但Quicksand插件似乎可以做到这一点：

---

是的，我的意思不完全是这样，但无论如何，谢谢你，我知道我不是很清楚。如果要重试，我添加了一些代码。：）

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