jQuery 通过 dataTransfer 传递对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15839649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pass object through dataTransfer
提问by sarink
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 users to be able to drag and drop elements (of many different types, ranging from files to images to snippets of HTML to just about anything). That's why I want to pass a real object, so I can attach data to it to specify things that will be necessary in order to know how to render it.
我试图找出一种方法来通过 javascript 的 event.dataTransfer 传递本机对象以进行拖放。我正在编写 CMS 的前端编辑器部分，并希望用户能够拖放元素（许多不同类型，从文件到图像到 HTML 片段到几乎任何东西）。这就是为什么我想要传递一个真实的对象，所以我可以将数据附加到它来指定一些必要的东西，以便知道如何渲染它。
One workaround is to use jQuery's .data() to attach an object to something else on the page, and then simply pass the selector string in setData... but I don't particularly enjoy that hack.
一种解决方法是使用 jQuery 的 .data() 将对象附加到页面上的其他内容，然后简单地在 setData 中传递选择器字符串......但我并不特别喜欢这种技巧。
This could also be solved with jQuery UI's draggable/droppable (and I'm not totally opposed to using any libraries), but since the dropzone is in an iframe, this is a actually a documented bug in the latest jQuery UI (1.10.2). Also, I would strongly prefer to do it natively if possible. There are already enough libraries in this app.
这也可以通过 jQuery UI 的可拖动/可放置来解决（我并不完全反对使用任何库），但由于放置区在 iframe 中，这实际上是最新 jQuery UI (1.10.2) 中记录的错误）。另外，如果可能的话，我强烈希望在本地进行。这个应用程序中已经有足够的库了。
Here's the problem: http://jsfiddle.net/AHnh8/
这是问题所在：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
});
Now, after reading the specs, I totally understand why this fails. What I don't understand, is how to ultimately achieve what I want.
现在，在阅读规范后，我完全理解为什么会失败。我不明白的是，如何最终实现我想要的。
Thanks
谢谢
回答by Le_Morri
You should pass the object to JSON.stringifybefore using setDatabecause you can only store strings.
您应该JSON.stringify在使用之前将对象传递给，setData因为您只能存储字符串。
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 thisworking Fiddle
看到这个工作小提琴
回答by JimmyBoy
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:
也许我要提出的建议是错误的（如果是这样，我会很高兴听到原因）。为什么不在 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();
});
