Passare l'oggetto tramite dataTransfer

Question

Sto cercando di capire come passare un oggetto nativo tramite event.dataTransfer di javascript per il trascinamento della selezione. Sto scrivendo la porzione di front-end editor di un CMS e voglio che gli utenti siano in grado di trascinare e rilasciare elementi (di molti tipi diversi, che vanno dai file alle immagini ai frammenti di HTML fino a qualsiasi cosa). Ecco perché voglio passare un oggetto reale, quindi posso allegare dei dati ad esso per specificare le cose che saranno necessarie per sapere come renderlo.

Una soluzione è quella di utilizzare .data di jQuery() per collegare un oggetto a qualcos'altro sulla pagina, e poi semplicemente passare la stringa di selezione in setData ... ma io non particolarmente godere di quella mod.

Questo potrebbe anche essere risolto con jQuery UI trascinabili/droppable (e io non sono assolutamente contrario a utilizzare le librerie), ma dal momento che la zona di lancio è in un iframe, questa è una realtà un problema documentato nell'ultima UI jQuery (1.10.2). Inoltre, preferirei fortemente farlo in modo nativo se possibile. Ci sono già abbastanza librerie in questa app.

Ecco il problema: http://jsfiddle.net/AHnh8/

var foo = {foo: "foo", bar: "bar"}; 

$dragme.on("dragstart", function(e) { 
    e.originalEvent.dataTransfer.setData("foo", foo); 
}); 

$dropzone.on("dragenter", function(e) { e.preventDefault(); }); 
$dropzone.on("dragover", function(e) { e.preventDefault(); }); 
$dropzone.on("drop", function(e) { 
    console.log(e.originalEvent.dataTransfer.getData("foo")); // [Object object] 
    console.log(typeof e.originalEvent.dataTransfer.getData("foo")); // string 
}); 

Ora, dopo aver letto le specifiche, ho completamente capire perché questo non riesce. Quello che non capisco, è come ottenere in definitiva ciò che voglio.

Grazie

Answer 1

Si dovrebbe passare l'oggetto a JSON.stringify prima di utilizzare setData perché si può solo memorizzare le stringhe.

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

E viceversa si deve riconvertire la stringa da un oggetto:

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

Vedi this Fiddle

lavoro

Answer 2

Forse quello che sto per suggerire è sbagliato (se così mi sarà felice di sentire perché). perché non impostare una variabile in chi ascolta dragstart fare riferimento a ciò che è necessario, per esempio:

//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(); 
});