JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">
<li draggable="true" ondragstart="drag(event)">Drag this line</li>
</div>
<br><br />
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

CSS

#div1, #div2 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

li:hover {
  background-color: red;
}

JavaScript

function allowDrop(ev) {
          ev.dataTransfer.dropEffect = 'link'
          ev.preventDefault();
        }

        function drag(ev) {
          ev.dataTransfer.setData("Text", ev.target.id);

        }

        function drop(ev) {
          var data = ev.dataTransfer.getData("Text");
          
          var lag = 0 //This just simulates a lot of things going on, not really real code
          for (i = 0; i < 500; i++) {
            lag += i
            lag /= 2
            console.log(lag)
          }
          
          ev.target.innerHTML = "If you don't move your mouse, it'll still be hovering over the line, if you move the mouse it updates"
          ev.preventDefault();
        }