JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li draggable="true">aaaaaaaaaaaaaaaaaaaaaaa</li>
    <li draggable="true">bbbbbbbbbbbbbbbbbbbbbbb</li>
    <li draggable="true">ccccccccccccccccccccccc</li>
    <li draggable="true">ddddddddddddddddddddddd</li>
    <li draggable="true">eeeeeeeeeeeeeeeeeeeeeee</li>
</ol>

CSS

.hovered {
    background: #fc9;
}
li.dragover {
    background: #9cf;
}
ol {
    border: 1px solid white;
}
ol.insistent {
    border-color: red;
}
ol.insistent li:hover {
    background: transparent;
}

JavaScript

let lis = document.querySelectorAll("li"),
    ol = document.querySelector("ol"),
    dragged = false,
    dragover = false;
    
ol.addEventListener("drop", function(event) {
  ol.insertBefore(dragged,dragover);
  this.classList.remove("insistent");
}, false);

for (let i=0, n = lis.length; i < n; i++) {
	const li = lis[i];
  
  li.addEventListener("mouseover", () => {
  	li.classList.add("hovered");
  });
  li.addEventListener("mouseout", () => {
  	li.classList.remove("hovered");
  });
  
  li.addEventListener("dragstart", () => {
  	dragged = li;
    ol.classList.add("insistent");
  });
  
  li.addEventListener("dragover", () => {
  	if (dragover) {
      dragover.classList.remove("dragover");
    }
    event.preventDefault();
    dragover = li;
    li.classList.add("dragover");
  });
}