transfer JSON using dataTransfer.setData with Drag and Drop

3
votes

I'm trying to transfer JSON data (instead of a string) with HTML5 drag-and--drop

When a drag is started you can set the data:

e.originalEvent.dataTransfer.setData("application/json", {x: 10});
},

And when the draggable is dropped

e.originalEvent.dataTransfer.getData("application/json");

But whatever I do, its always a string. How can I transfer an actual object ? DEMO

1
javascripthtmldrag-and-drop

1 Answers

1
votes

JSON is a string representation of your data (e.g. data of a serialized object). This is why you get a string result.

If your serialized object contains a property with unique identifier (id), you can read the id from json structure and refer to your source object (e.g. get source object by id).

to get a HTML5 elemenent by its ID, you can use JavaScript getElementById functionality. See https://www.w3schools.com/jsref/met_document_getelementbyid.asp