Pass object through dataTransfer

Question

I\'m trying to figure out a way to pass a native object through javascript\'s event.dataTransfer for drag and drop. I\'m writing the front end editor portion of a CMS, and want

Answer 1

You should pass the object to JSON.stringify before using setData because you can only store strings.

var j = JSON.stringify(foo);
e.originalEvent.dataTransfer.setData("foo", j);

And the other way round you have to reconvert the string to an object:

var obj = JSON.parse(e.originalEvent.dataTransfer.getData("foo"));
console.log("foo is:", obj);

See this working Fiddle

Answer 2

Maybe what I am about to suggest is wrong (if so I will be happy to hear why ). Why not set a variable in the dragstart listener to reference what you need, for example:

//global variable
var obj;

//set the global variable to wahtever you wish in the dragstart:
$dragme.on("dragstart", function(e) {
    obj = foo;
    //or even obj = document.getElementById("some element's id");
});

//use this obj in the drop listener.
$dropzone.on("drop", function(e) {
    obj.doWahtEver();
});