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”。因此，您很不幸尝试在此处存储对象引用。

我在这里要做的是在某个地方创建另一个对象，并将所需的引用存储在其中。

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放在单独的文件中，并在两个组件中都包含对它的引用。

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

1 个答案: