使用动画垂直移动div /块

Question

如果我有div / blocks

<ul class="list-group">
      <li class="list-group-item clearfix">List Item 1  <button class="btn btn-default animate pull-right">Animate</button></li>
      <li class="list-group-item clearfix">List Item 2 <button class="btn btn-default animate pull-right">Animate</button></li>
      <li class="list-group-item clearfix">List Item 3  <button class="btn btn-default animate pull-right">Animate</button></li>
      <li class="list-group-item clearfix">List Item 4  <button class="btn btn-default animate pull-right">Animate</button></li>
      <li class="list-group-item clearfix">List Item 5  <button class="btn btn-default animate pull-right">Animate</button></li>
    </ul>

点击按钮我想用动画重新排序元素，就像在顶部点击/选中元素一样

1. 清单第5项
2. 列出项目1
3. 列出项目2
4. 列出项目3
5. 列出项目4

在选择另一个项目时，它必须位于已移动的项目旁边

1. 清单第5项
2. 列出项目3
3. 列出项目1
4. 列出项目2
5. 列出项目4

我们如何实现这一目标

Example Plunker

但这并没有完全转移到它的位置。 注意：元素应仅在单击时移动。不是拖放

Answer 1

在此示例中，单击按钮时，列表项将移至列表顶部。因为它使用 <section class="common_section"> <div class="container"> <iframe name="dynamic" src="dynamic.php" width="100%" height="6200px" frameborder="0"></iframe> </div> </section> 函数，所以它仅适用于小于1.9的jQuery版本。

live

http://jsfiddle.net/zdhzefu5/1