用动画垂直移动div/blocks

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

我们如何才能做到这一点

示例Plunker

但是这并没有完美地移动到它的位置。注意:元素应该只在点击时移动。不能拖放

Answer 1

在这个例子中，当您单击一个按钮时，列表项移动到列表的顶部。因为它使用了live函数，所以只能在jQuery 1.9以下版本中工作。

$("li").live("click", function() {
    var selectedItem = $(this).closest("li");
    var listHeight = $("ul").innerHeight();
    var elemHeight = selectedItem.height();
    var elemTop = selectedItem.position().top;
    var moveUp = listHeight - (listHeight - elemTop);
    var moveDown = elemHeight;
    var listNum = selectedItem.attr("id");
    var listHtml = selectedItem.outerHTML();
    $("li").each(function() {
        if ($(this).attr("id") == listNum) {
            return false;
        }
        $(this).animate( { "top": '+=' + moveDown }, 1000);
    });
    selectedItem.animate( { "top": '-=' + moveUp }, 1000, function() {
        $(this).remove();
        $("ul").html(listHtml + $("ul").html());
        $("li").attr("style", "");
    });
});
(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  }
})(jQuery);

http://jsfiddle.net/zdhzefu5/1