如何检测当前是否有来自外部源的元素正在被拖拽？

云原生阿岚

2026-7-7

检测外部源拖拽的当前状态

要检测来自外部源的元素是否正在拖拽到当前页面，可以通过监听页面级的拖拽事件结合状态标记来实现，具体步骤如下：

维护一个状态变量let dragInProgress = false，用于标记当前是否有拖拽操作在页面中进行。

监听document的dragenter和dragover事件：触发时将dragInProgress设为true，同时清除之前设置的延迟定时器（避免元素在页面内移动时误判拖拽结束）。

let dragTimer;
document.addEventListener('dragenter', () => {
  dragInProgress = true;
  clearTimeout(dragTimer);
});
document.addEventListener('dragover', () => {
  dragInProgress = true;
  clearTimeout(dragTimer);
});

监听document的dragleave和drop事件：触发时设置一个短延迟定时器（比如100ms），定时器到期后将dragInProgress设为false。使用延迟是因为dragleave会在拖拽元素从页面内的一个元素移到另一个元素时频繁触发，延迟可以确保只有当拖拽真的离开整个页面或完成时才标记结束。
```
document.addEventListener('dragleave', () => {
  dragTimer = setTimeout(() => {
    dragInProgress = false;
  }, 100);
});
document.addEventListener('drop', () => {
  clearTimeout(dragTimer);
  dragInProgress = false;
});
```