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

Question

我有两列，左边的一列是方形、浮动、jQuery 可拖动元素的网格。右侧的列是 jQuery 放置目标。因此，当我将一个 dropabble 放在目标上时，它会附加到右列并隐藏在左侧，导致网格移动以填充该 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>

Answer 1

我还没有在这个确切的上下文中使用过这个，但看起来 Quicksand 插件可能可以解决这个问题：

jQuery Quicksand 插件

Answer 2

不知道这是否是你想要的，但我确实尝试过:)

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