拖拽功能异常：拖动开始时droptarget处not-allowed光标闪烁

问题现象 #

拖动页面中的白色可拖拽div时，蓝色目标区域（droptarget）会瞬间闪烁not-allowed光标，该光标本不应显示。

重现代码 #

HTML

<div id="droptarget">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>

CSS

#draggable {
  text-align: center;
  background: white;
  height: 100px;
}

#droptarget {
  width: 200px;
  height: 100px;
  background: blueviolet;
  margin: 10px;
  padding: 20px;
}

JavaScript

const target = document.getElementById("droptarget")
target.addEventListener("dragover", (event) => {
  event.preventDefault()
})
target.addEventListener("dragenter", (event) => {
  event.preventDefault()
})

问题原因 #

拖拽启动瞬间，浏览器会先默认判断目标区域是否允许放置，此时dragover和dragenter的默认行为还未被阻止，浏览器短暂触发了默认的禁止放置光标，从而导致闪烁现象。

解决方案 #

方案1：添加dropzone属性

给目标区域元素添加dropzone属性，提前告知浏览器该区域允许放置操作，避免默认禁止光标触发：

<div id="droptarget" dropzone="copy">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>

属性值可根据需求选择copy/move/link，对应不同的放置行为。

方案2：CSS指定光标样式

通过CSS直接覆盖目标区域的默认光标样式，避免禁止光标显示：

#droptarget {
  width: 200px;
  height: 100px;
  background: blueviolet;
  margin: 10px;
  padding: 20px;
  cursor: copy; /* 可替换为move/pointer等允许放置的光标样式 */
}

内容的提问来源于stack exchange，提问作者Alex G