Chrome中拖拽元素设display:none导致拖拽终止的解决方法

在Chrome中直接通过display: none隐藏拖拽起始元素会导致拖拽系统停止运行——这是因为Chrome的拖拽机制依赖起始元素的DOM存在性；而Firefox对此处理逻辑更宽松。以下是几种可行的解决方法：

方法一：用visibility: hidden替代display: none #

visibility: hidden仅隐藏元素的视觉表现，但元素仍保留在DOM流中，不会中断拖拽事件链。

修改后的JavaScript代码：

var div = document.getElementById("div");

function dragstart(ev) {
  div.style.visibility = "hidden";
}

function dragend(ev) {
  div.style.visibility = "visible";
  console.log("拖拽结束");
}

方法二：设置透明度+禁用指针事件 #

通过opacity: 0隐藏元素视觉，pointer-events: none避免后续鼠标干扰，同时保留DOM元素的存在，确保拖拽流程正常执行。

修改后的JavaScript代码：

var div = document.getElementById("div");

function dragstart(ev) {
  div.style.opacity = "0";
  div.style.pointerEvents = "none";
}

function dragend(ev) {
  div.style.opacity = "1";
  div.style.pointerEvents = "auto";
  console.log("拖拽结束");
}

方法三：延迟执行隐藏操作 #

给Chrome拖拽系统足够的初始化时间，通过setTimeout延迟几毫秒再隐藏元素，让拖拽状态先完成初始化。

修改后的JavaScript代码：

var div = document.getElementById("div");

function dragstart(ev) {
  setTimeout(() => {
    div.style.display = "none";
  }, 50);
}

function dragend(ev) {
  div.style.display = "block";
  console.log("拖拽结束");
}

原测试代码参考 #

HTML：

<div id="div" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">Drag</div>

CSS：

#div {
  width: 350px;
  height: 70px;
  background: red;
  padding: 10px;
  position: absolute;
  top: 50px;
  border: 1px solid #aaaaaa;
  color: white;
  cursor: pointer;
}

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