jquery - 使用动画垂直移动 div/ block

Question

如果我有 div/ block

<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

在这个例子中，当你点击一个按钮时，列表项移动到列表的顶部。因为它使用 live 函数，所以它只适用于 1.9 以下的 jQuery 版本。

$("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