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

Question

I do the following:

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

When I get data in another place:

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

I get data as [object Object] instead real instrance.

Before passing to data I see that it is instance:

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

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

I know it should be serialized to string JSON, but I have complicated instance with composition.

Answer 1

If you look at the documentation for setData() it specifically says "A DOMString representing the data to add to the drag object.". So you are out of luck trying to store an object reference there.

What I would do here is create a another object somewhere and store the needed reference there with an 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
}

This would even support multi touch dragging if that is somehow needed. If this needs to be shared between components you could simply put the dataTransferCache in a separate file and include a reference to in in both components.