如何从dataTransfer获取数据作为对象？答案

【问题标题】：How to get data as Object from dataTransfer?如何从dataTransfer获取数据作为对象？
【发布时间】：2020-07-09 23:55:05
【问题描述】：

我执行以下操作：

const blockOrField  = new Block();
ev.dataTransfer.setData("data", blockOrField);

当我在另一个地方获取数据时：

cosnt data = e.dataTransfer.getData("data");

我得到data 为[object Object] 而不是真实实例。

在传递给数据之前，我看到它是实例：

 if (blockOrField instanceof FieldDefinition) {
      alert("works");
  }

ev.dataTransfer.setData("data", blockOrField);

我知道它应该被序列化为字符串 JSON，但我有复杂的组合实例。

【问题讨论】：

setData 的功能是否与localStorage 相同？如果是这样，您可能希望在设置数据时JSON.stringify。
不，我不需要序列化，我需要将它作为实例类传递
它将实例转换为字符串：console.log(typeof e.dataTransfer.getData("data"));
这个QA可能是相关的...stackoverflow.com/questions/15839649/…
我知道，但你知道实例类和普通对象的区别

标签： javascript

【解决方案1】：

如果您查看 setData() 的文档，它会明确表示“表示要添加到拖动对象的数据的 DOMString。”。所以你不走运试图在那里存储一个对象引用。

我会在这里做的是在某处创建另一个对象，并将所需的引用与一个 id 一起存储在那里。

const dataTransferCache = {};

function onDragStart(ev) {
    const block = new Block();
    const id = GetRandomId(); // Just get an id somehow
    dataTransferCache[id] = block;
    ev.dataTransfer.setData("data", id);
}

function onDragEnd(ev) {
    const id = ev.dataTransfer.getData("data");
    const block = dataTransferCache[id];
    delete dataTransferCache[id]; // Remove the value again
}

如果需要，它甚至可以支持多点触控拖动。如果这需要在组件之间共享，您可以简单地将 dataTransferCache 放在一个单独的文件中，并在两个组件中包含对 in 的引用。

【讨论】：