CODEWITHSUNDEEP
javascripthtmldrag-and-drop
Jeanluca Scaljeri
Jeanluca Scaljeri

Reputation: 29119

transfer JSON using dataTransfer.setData with Drag and Drop

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

Upvotes: 5

Views: 2458

Answers (1)

Christoph Bimminger
Christoph Bimminger

Reputation: 1018

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

Upvotes: 1

Related Questions