dataTransferでオブジェクトを渡す

Question

ドラッグアンドドロップのためにjavascriptのevent.dataTransferを使ってネイティブオブジェクトを渡す方法を理解しようとしています。私はCMSのフロントエンドエディタの部分を書いています。ユーザーが要素（ファイルから画像、HTMLのスニペット、まさにあらゆるものまでさまざまな種類の要素）をドラッグ＆ドロップできるようにしたいと考えています。だから私は実際のオブジェクトを渡したいので、それをレンダリングする方法を知るために必要なことを指定するためにデータを添付することができます。

jQueryの.data（）を使用してページ上のオブジェクトにオブジェクトをアタッチし、セレクタ文字列をsetDataに渡すだけですが、特にそのハックは楽しめません。

これは、jQuery UIのドラッグ可能/ドロップ可能で解決できる可能性があります（そして私は完全にライブラリを使用することに反対していません）が、dropzoneはiframe内にあるので、これは実際には最新のjQuery UI （1.10.2）。また、可能であればネイティブで行うことを強くお勧めします。このアプリにはすでに十分なライブラリがあります。これが失敗した理由を今すぐ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 
}); 

は、スペックを読んだ後、私は完全に理解して：

は、ここで問題です。私が理解できないことは、最終的に私が望むものを達成する方法です。あなたは、文字列のみを保存することができますので、

おかげ

Answer 1

あなたがsetDataを使用する前にJSON.stringifyにオブジェクトを渡す必要があります。

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

そして、あなたがオブジェクトに文字列を再変換する必要が他の方法でラウンド：そうならば

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

は、私は（フィドル

Answer 2

作業thisはたぶん私が提案しようとしています何が間違っている参照してください。理由を聞いてうれしいです）。たとえば、あなたが必要なものを参照するためにはdragstartリスナーに変数を設定しないのはなぜ ：

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