镀铬拖动越野车？可以使用getData（）读取DataTransfer项目

Question

看看这个小提琴： https://jsfiddle.net/zanpx9mw/1/1/1/

代码：

const draggable_element = document.getElementById("draggable_element");

draggable_element.addEventListener("dragstart", (e) => {
  const rect = e.srcElement.getBoundingClientRect();
  const dt = e.dataTransfer;
  dt.setData("dx", `${Math.round(e.clientX - rect.x)}`);
  dt.setData("dy", `${Math.round(e.clientY - rect.y)}`);
  [...dt.items].forEach(it => {
    console.log(`dragstart ${it.type}: ${dt.getData(it.type)}`);
  });
});

draggable_element.addEventListener("dragover", (e) => {
  const dt = e.dataTransfer;
  [...dt.items].forEach(it => {
    console.log(`dragover ${it.type}: ${dt.getData(it.type)}`);
  });
});

在Firefox上，我可以将数据存储在事件 dataTransfer 对象中的 dragstart 事件中，并在 dragover 事件中读取。

但是，在Chromium/Chrome中，我可以存储数据并在 dragstart 事件中成功阅读，但不再在 dragover 事件中。奇怪的是带有预期名称的项目仍然存在，但数据似乎是空的。

但是有一个有趣的解决方法：我可以将数据保存在项目类型中，但这似乎是错误的..

这​​是已知的行为吗？我做错了吗？

Answer 1

看起来Chrome支持 GetData（）仅在出于安全原因下drop 事件（从

为了规避这些“安全”措施，您必须将数据写入这样的类型：

const draggable_element = document.getElementById("draggable_element");

function int_list(dt, name) {
  for(const it of dt.items) {
    if (it.type.startsWith(`${name}`))  {
        return it.type.split("_").slice(1).map(x=>parseInt(x));
    }
  }
}

draggable_element.addEventListener("dragstart", (e) => {
  const rect = e.srcElement.getBoundingClientRect();
  e.dataTransfer.setData(`pos_${Math.round(e.clientX - rect.x)}_${Math.round(e.clientY - rect.y)}`, '');
});

draggable_element.addEventListener("dragover", (e) => {
  const pos = int_list(e.dataTransfer, "pos");
  e.srcElement.style.left = `${e.x - pos[0]}px`;
  e.srcElement.style.top = `${e.y - pos[1]}px`;
});

请参见工作示例