拖动元素时，光标位置不更新

Question

我有一个网站可以将元素拖到放置区。问题是当你删除一个元素时，后端的很多东西都必须更新。因此，光标位置只有在移动光标后才会更新。

当你把线拖到底部时div不移动光标，它仍然认为光标位置在拖动前的原始位置，所以悬停仍然显示红色。一旦您移动光标，它就会更新。

这是代码：

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

编辑：我试过了

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

在CSS 这有助于解决问题，但在某些罕见的时刻它不起作用，并且当你放下它时有 window.alert() 时它也不起作用，已显示 here

Answer 1

我认为你最好使用 dragend 或 dragleave 事件侦听器。不是 :hover.

边试边看差异。

dragend 将按您希望的方式工作。但是，如果将 li 拖到 div2 以外的地方，它会 returns 然后红色消失。

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

dragleave 将在您的鼠标离开原始 li 元素时移除红色。

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

这里是JSFiddle.

我注释了这两个代码。一个一个放出来，看看区别

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>

拖动元素时，光标位置不更新

When dragging an element over, cursor position does not update

javascript

drag-and-drop