Prześlij obiekt przez dane Transfer do domeny

Question

Próbuję znaleźć sposób na przekazanie obiektu macierzystego za pośrednictwem zdarzenia event.dataTransfer języka JavaScript do przeciągania i upuszczania. Piszę część edytora front-end CMS-a i chcę, żeby użytkownicy mogli przeciągać i upuszczać elementy (wielu różnych typów, od plików po obrazy, aż po fragmenty kodu HTML do niemal wszystkiego). Dlatego chcę przekazać rzeczywisty obiekt, więc mogę dołączyć do niego dane, aby określić rzeczy, które będą konieczne, aby wiedzieć, jak je renderować.

Jednym z obejść jest użycie jQuery's .data() w celu dołączenia obiektu do czegoś innego na stronie, a następnie po prostu przekazanie łańcucha selektora w setData ... ale nie podoba mi się ten hack.

Może to również zostać rozwiązane przez przeciąganie/zrzucanie interfejsu jQuery UI (i nie jestem całkowicie przeciwny używaniu jakichkolwiek bibliotek), ale ponieważ dropzone znajduje się w elemencie iframe, jest to faktycznie udokumentowany błąd w najnowszym interfejsie jQuery (1.10.2). Ponadto zdecydowanie wolałbym to robić natywnie, jeśli to możliwe. W tej aplikacji jest już wystarczająco dużo bibliotek.

Oto problem: 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 
}); 

Teraz, po przeczytaniu specyfikacji, I całkowicie zrozumieć, dlaczego to się nie powiedzie. Czego nie rozumiem, to, jak ostatecznie osiągnąć to, czego chcę.

Dzięki

Answer 1

Należy przekazać obiekt do JSON.stringify przed użyciem setData ponieważ można przechowywać tylko łańcuchy.

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

I na odwrót trzeba przestawienia ciąg do obiektu:

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

Zobacz this Fiddle

pracy

Answer 2

Może to, co mam zamiar zasugerować jest źle (jeśli tak ja chętnie usłyszę dlaczego). Dlaczego nie ustawić zmienną w słuchacza dragstart odwołać, co trzeba, na przykład:

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