Sortieren von Listenelementen nach oben und unten nicht mit Drag & Drop

Question

Ich möchte, dass ein Benutzer eine Liste bei einem Klick-Ereignis neu anordnen kann. Hier ist mein Code:

$(function() {

  $('#reOrder li').each(function, (index) {

    $(this).attr('id', index);

  });

  $("#reOrder").delegate("li", "click", function() {

    var $indexItem = $(this).index('#reOrder li');

    var $thisTxt = $(this).text();

    var $prevTxt = $(this).prev('li').text();

    $($thisTxt).replaceWith($prevTxt);

    //alert($thisTxt);

    //alert($prevTxt);

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="reOrder">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

In diesem Beispiel möchte ich also das angeklickte li-Element und seinen Inhalt an die obere Position im DOM verschieben. Ich nehme an, streng genommen ist es nach unten in den Index der li Elemente verschoben.

Diese Funktion wird später um Schaltflächen erweitert, mit denen die Listenelemente nach oben und unten verschoben werden können, sowie um eine Schaltfläche zum Absenden, mit der die Reihenfolge bzw. der Status der Listenelemente gespeichert wird.

Ich habe viele Informationen über Drag & Drop gefunden (was nicht erforderlich ist), aber nicht viel über diese Art von Funktionalität.