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;
}

.hover {
  background-color: red;
}

html.busy, html.busy * {
  cursor: wait !important;
}

JavaScript

document.querySelectorAll('#div1 li').forEach(function (item) {
  item.addEventListener('mouseenter', function () {
    this.classList.add('hover');
  });
  item.addEventListener('mouseleave', function () {
    this.classList.remove('hover');
  });
  
  // use dragend or dragleave.
  // dragend
  /* item.addEventListener('dragend', function () {
    this.classList.remove('hover');
  }, false); */ 
  
  // dragleave
  /* item.addEventListener('dragleave', function () {
    this.classList.remove('hover');
  }, false);  */
  
});  
      
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)
  }
  /* window.alert("just another 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();
}