Сортировка списка на JQuery?

Question

[retr0]

Есть вот такой jquery код:

$("li").live("click", function() {
    var $myLi = $(this);
    var listHeight = $("ul").innerHeight();
    var elemHeight = $myLi.height();
    var elemTop = $myLi.position().top;
    var moveUp = listHeight - (listHeight - elemTop);
    var moveDown = elemHeight;
    var liId = $myLi.attr("id");
    var enough = false;
    var liHtml = $myLi.outerHTML();
    
    $("li").each(function() {
        if ($(this).attr("id") == liId) {
            return false;
        }
        $(this).animate({"top": '+=' + moveDown}, 1000);
    });
    
    $myLi.animate({"top": '-=' + moveUp}, 1000, function() {
        $myLi.remove();
        var oldHtml = $("ul").html();
        $("ul").html(liHtml + oldHtml);
        $("li").attr("style", "");
    });
});

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  }
})(jQuery);

HTML:

<br /><br /><br />
    <ul>
      <li id="1">I am list item number 1.</li>
      <li id="2">I am list item number 2.</li>
      <li id="3">I am list item number 3.</li>
      <li id="4">I am list item number 4.</li>
      <li id="5">I am list item number 5.</li>
      <li id="6">I am list item number 6.</li>
      <li id="7">I am list item number 7.</li>
      <li id="8">I am list item number 8.</li>
      <li id="9">I am list item number 9.</li>
      <li id="10">I am list item number 10.</li>
    </ul>

CSS:

body {
    font-size: 14px;
    font-family: sans-serif;
}

li, ul {
    position: relative;
    top: 0;
    left: 0;   
}

Это список, каждый элемент которого при клике плавно перемещается вверх списка, а все остальные элементы спускаются ниже. Как сделать аналогичную анимацию, которая перемещала бы кликнутый элемент в самый низ списка? Заранее благодарю за ответ

Answer 1

[twobomb]

$("li").on("click", function() {
    var $myLi = $(this);
    var listHeight = $("ul").innerHeight();
    var elemHeight = $myLi.height();
    var elemTop = $myLi.position().top;
    var moveDown = elemHeight;
    var moveUp = (listHeight - elemTop - moveDown);
    var liId = $myLi.attr("id");
    var enough = false;
    var liHtml = $myLi.outerHTML();
    
    $($("li").get().reverse()).each(function() {
        if ($(this).attr("id") == liId) {
            return false;
        }
        $(this).animate({"top": '-=' + moveDown}, 1000);
    });
    
    $myLi.animate({"top": '+=' + moveUp}, 1000, function() {
        $myLi.remove();
        var oldHtml = $("ul").html();
        $("ul").html(oldHtml + liHtml );
        $("li").attr("style", "");
    });
});

(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  }
})(jQuery);