javascript - 通过dataTransfer传递对象

  显示原文与译文双语对照的内容
0 0

我只是想办法通过java script原生对象传递给事件.dataTransfer进行拖放。 我在写前端编辑器部分CMS,希望用户能够拖放元素( 属于许多不同类型,范围从HTML的文件图像代码段到bento ) 。 所以我想通过实际对象,所以我可以将数据附着到它指定的事情将是必要的,以了解如何呈现它。

一种解决方法是使用JQuery是.data( ) 要将对象附加至页面上的其他内容,然后只需将选择器字符串传入setData 。。。 但我并不怎么喜欢hack的。

这也可以解决使用JQuery UI为draggable/droppable ( 我并不是完全反对使用任何库),但是由于dropzone是在iframe中,这是一个实际中的记录bug最新JQuery UI ( 1 .10 。2 ) 。 另外,我坚决比较喜欢把它本身( 如果可能) 。 这个app也有了足够的库。

问题在这里: 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
});

现在,在阅读说明书,我完全明白这将失败。 我不明白的是,如何最终达到我想要的。

谢谢

时间:原作者:1个回答

0 0

你应该将对象传递到 JSON.stringify然后再使用 setData因为你只能存储字符串。

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

和倒过来你得重新转换string到object :

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

请参见工作Fiddle

原作者:
...