通過dataTransfer傳遞對象

我想通過javascript的event.dataTransfer傳遞一個本地對象的方式來拖放。我正在編寫一個CMS的前端編輯器部分，並希望用戶能夠拖放元素（包括文件，圖像，HTML片段等各種類型的元素）。這就是爲什麼我想傳遞一個真實的對象，所以我可以附加數據來指定必要的事情，以瞭解如何呈現它。通過dataTransfer傳遞對象

一種解決方法是使用jQuery的.data（）將對象附加到頁面上的其他內容，然後只需在setData中傳遞選擇器字符串...但我並不特別喜歡這種黑客行爲。

這也可能與解決的jQuery UI的可拖動/投擲的（我不完全反對使用任何庫），但由於懸浮窗是在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 
});

現在，看完後的規格，我完全理解爲什麼失敗。我不明白的是如何最終實現我想要的。

感謝

來源

2013-04-05 sarink

我想你只需要在接收其發送和JSON.parse數據前字符串化的數據。 – Deee 2017-12-15 08:06:13

你應該使用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);

見this工作小提琴

來源

2013-04-05 17:35:07

我在發佈之後也考慮過這個問題，儘管我仍然覺得應該有辦法傳遞一個對象？ – sarink 2013-04-05 18:05:31

我不認爲有辦法。但是您可以在存儲數據的位置添加全局數組，然後將密鑰傳遞給'set/getData'。也許它對於較大的對象更快 – 2013-04-05 18:07:39

是的，我在最初的問題中提出了這個想法。真的希望有辦法以某種方式傳遞一個真實的物體。似乎有點奇怪，這將不會包含在drag n drop規範中。我想我只是解決stringify或全球陣列... – sarink 2013-04-08 17:11:18

也許我現在正要建議是錯誤的（如果是的話我會很高興聽到爲什麼）。爲什麼不設置一個變量在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-02 16:07:13 JimmyBoy

bc globals = :(這裏有很多簡單的解決方法。我最初發布這個問題是因爲我想知道你是否可以通過dataTransfer傳遞一個對象。事實證明，你不能。 – sarink 2015-08-03 20:04:09

@Kabir，但它是更正確的方式，然後序列化/反序列化，從文檔你應該能夠看到數據的fromat是https://developer.mozilla.org/en-US/docs/Web/API/DOMString – 2oppin 2016-12-01 07:14:49

通過dataTransfer傳遞對象

回答

相關問題