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