When dragging an element over, cursor position does not update

Question

I have a website that drags an element over to a drop zone. The problem is when you drop an element, a lot stuff in the back end has to update. Due to this, the cursor position won't update until to move the cursor.

This JSFiddle sort of reproduces the problem

When you drag the line over to the bottom div and don't move the cursor, it still thinks the cursor location is in the original spot before it dragging, so the hover still displays red. Once you move the cursor it updates.

This is the code:

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

JS:

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

EDIT: I tried

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

in the CSS This helped the issue, but some rare moments it doesn't work and it also doesn't work when you have a window.alert() when you drop it, shown here

Answer 1

I think you better use dragend or dragleave event listener. not :hover.

See the difference as you try it.

dragend will work the way you want it to. However, if you drag the li to a place other than div2, it returns and then the red color disappears.

item.addEventListener('dragend', function () {
  this.classList.remove('hover');
}); 

dragleave will remove red color when your mouse leave original li element.

item.addEventListener('dragleave', function () {
  this.classList.remove('hover');
}); 

Here is JSFiddle.

I annotated the two codes. Release one by one and look at the difference.

document.querySelectorAll("#div1 li").forEach(function (item) {
  item.addEventListener("mouseenter", function () {
    this.classList.add("hover");
  });
  item.addEventListener("mouseleave", function () {
    this.classList.remove("hover");
  });
  
  
  item.addEventListener("dragend", function () {
    this.classList.remove("hover");
  });
  
  /** If you use dragleave, red color will disappeared when you leave original li element. */
  /* 
  item.addEventListener('dragleave', function () {
    this.classList.remove('hover');
  });
  */
});

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 (let 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();
}

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

.hover {
  background-color: red;
}

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