List sorting with jQuery?

Question

css

There is this jquery code:

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

This is a list, each element of which, when clicked, smoothly moves to the top of the list, and all other elements descend below. How to make a similar animation that would move the clicked item to the very bottom of the list? Thank you in advance for your response

Answer 1

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