javascript - 如何从 dataTransfer 获取对象数据？

Question

我执行以下操作:

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，但我有复杂的组合实例。

Answer 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 的引用。