4

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

Jeanluca Scaljeri
  • 26,343
  • 56
  • 205
  • 333

1 Answers1

1

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

Christoph Bimminger
  • 1,006
  • 7
  • 25
  • I cannot really connect your answer with my question, sorry. My question is about drag and drop and how to transfer json/objects instead of a string – Jeanluca Scaljeri Dec 19 '17 at 20:05
  • As far as I understand your question, you want to drag&drop an element within an HTML5 position. The element has an ID. Drag&Drop creates an event. The event transports a "message". This message is a JSON structure (a string) in your explaination. Yes, it was caused by dragging an object - but the event just transports a message, not the object itself. I described how you can extract the source object's identifier (which you have to add to your json structure), to find the source object afterwards. But maybe I totally misunderstood your question; if so please add more usecase info. – Christoph Bimminger Dec 19 '17 at 21:15