我试图找出一种通过 javascript 的 event.dataTransfer 传递本机对象以进行拖放的方法。我正在编写 CMS 的前端编辑器部分,并希望用户能够拖放元素(许多不同类型,从文件到图像到 HTML 片段到几乎任何内容)。这就是为什么我想传递一个真实的对象,这样我就可以将数据附加到它来指定所需的内容,以便知道如何渲染它。
一种解决方法是使用 jQuery 的 .data() 将对象附加到页面上的其他内容,然后简单地在 setData 中传递选择器字符串...但我不太喜欢这种技巧。
这也可以通过 jQuery UI 的可拖/可放功能来解决(我并不完全反对使用任何库),但由于 dropzone 位于 iframe 中,这实际上是最新 jQuery UI (1.10.2 )。另外,如果可能的话,我强烈希望在本地进行。该应用程序中已经有足够的库。
问题是这样的: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
});
现在,在阅读了规格之后,我完全理解为什么会失败。我不明白的是如何最终实现我想要的。
Thanks
您应该将对象传递给JSON.stringify
使用前setData
因为你只能存储字符串。
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);
See this http://jsfiddle.net/aNErc/2/工作小提琴
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)