jquery - 移动 float div 时为其设置动画

Question

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

有没有办法可以使用 jQuery 来制作动画而不是即时移动？

好的，我添加了一些代码。我想说的是，如果您将绿色拖过去，左列中后面的那些将移动以填充空白区域。我想知道他们自己做出的 Action (其中一个离开后)是否可以动画化。抱歉，如果我感到困惑，不知道如何解释这一点。

谢谢

如果有人有任何想法，请最后一击。

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