50

我正在尝试找出一种通过 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
});

现在，在阅读了规范之后，我完全理解了为什么会失败。我不明白的是，如何最终实现我想要的。

谢谢

4

2 回答 2

76

您应该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);

看到这个工作小提琴

于 2013-04-05T17:35:07.373 回答
6

也许我要提出的建议是错误的（如果是这样，我会很高兴听到为什么）。为什么不在 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();
});
于 2015-08-02T16:07:13.453 回答