如何检查当前是否正在拖动某些内容（来自不同的原点）？

Question

HTML 拖放 API 将在被拖动的项目上触发

dragstart

/

dragend

事件。

这使得更新

dragInProgress

变量变得容易，该变量可用于检查拖动是否正在进行。

但是，如果用户在不同的浏览器窗口中发起拖动，则此方法不起作用，因为

dragstart/dragend

将在不同的浏览器窗口中触发。

一种解决方法是将

dragInProgress

存储在

localStorage

中，但我不能使用这种方法，因为即使从不同的来源拖入某些内容（例如，如果正在拖动图像或链接），我也需要它才能工作来自不同网站的网页）。

如何检查用户当前是否正在页面上拖动某些内容（是否有外部来源）？

Answer 1

我没有 100% 理解你的想法，但这里有一个示例，说明如何在页面上拖动某些内容，并在拖动的项目被放下时从 DataTransfer 对象获取某些内容。

document.addEventListener('dragover', e => {
  e.preventDefault();
  document.querySelector('.over').classList.add('show');
  document.querySelector('.drop').classList.remove('show');
});

document.addEventListener('drop', e => {
  e.preventDefault();
  [...e.dataTransfer.items].forEach(item => {
    console.log(`kind = ${item.kind}, type = ${item.type}`, e.dataTransfer.getData(item.type));
  });
});

.page {
  min-height: 100vh;
  background-color: Azure;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drop {
  display: none;
}

.over {
  display: none;
}

.show {
  display: inline;
}

<div class="page"><span class="drop show">Drop here</span><span class="over">Something is being dragged</span></div>