@Владимир Казак's answer is beautifully simplistic. All credit goes to him/her, I just further simplified & tweaked his/her design.

However, consider that the id's & classes in the are not necessary if you compare the .parentNode of dropzone's target <li>'s to the .parentNode of the original <li>. Since the .innerText ... or likewise the .innerHTML ... isn't changing either, then a check here can ensure that the code is triggered only when dropping in a new position (same as referenced answer's id comparison).

HTML

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>

Javascript

let orig_list;  // original parent <ul> or <ol>
let orig_li;    // original/selected <li>
let orig_pos;   // starting position of the original/selected <li>
let new_pos;    // destination position of the original/selected <li>

document.addEventListener("dragstart", ({target}) => {
  orig_li = target;                                 // get the original <li>
  orig_list = target.parentNode.children;           // get the parent <ul>, or even <ol>
  for(let i = 0; i < orig_list.length; i += 1) {    // loop thru all <li>'s in the list
    if(orig_list[i] === orig_li){
      orig_pos = i;                                 // set the original <li>'s position
    }
  }
});
            
document.addEventListener("dragover", (event) => {
  // disable the "dragover" event ... idk why.
  // well, because we don't want the event's default bahavior.
  // idk what the event's default behavior is ... but this works.
  // ...
  // so if it works, then it wasn't stupid ... & ... if it isn't broke, then don't fix it.
  event.preventDefault();
});
            
document.addEventListener("drop", ({target}) => {
  //check to make sure that we are dropping into the same list & not in the same position
  if(target.parentNode == orig_li.parentNode && target.innerText !== orig_li.innerText) {
    orig_li.remove( orig_li );                      // remove the original <li>
    for(let i = 0; i < orig_list.length; i += 1) {  // loop thru the list again
      if(orig_list[i] === target){
        new_pos = i;                                // get the <li>'s new position
      }
    }
    // determine whether or not to drop the original before or after it's new position
    if(orig_pos > new_pos) {
      target.before( orig_li );
    } else {
      target.after( orig_li );
    }
  }
});

I hope this is legible. I hope this is usable. Now go & make some AWESOME sh... family friendly stuff !!!

(I don't have enuf rep/points to comment at the bottom of the referenced answer, so I'm commenting here. Most of this is just duplicate, but I'm trying to provide a complete answer to show a comparison. I wanted to "Edit" the referenced answer, but I could not figure out how to force a strikethrough so that differences in code would show. I included remarks to help others figure out what's going on in my code ... & also to avoid my answer being "considered low quality".)