डेटा के माध्यम से ऑब्जेक्ट पास करें

Question

मैं जावास्क्रिप्ट के event.dataTransfer के माध्यम से ड्रैग और ड्रॉप के लिए मूल ऑब्जेक्ट पास करने का एक तरीका जानने का प्रयास कर रहा हूं। मैं एक सीएमएस के फ्रंट एंड एडिटर हिस्से को लिख रहा हूं, और चाहता हूं कि उपयोगकर्ता तत्वों को खींचें और छोड़ सकें (कई अलग-अलग प्रकारों से, फाइलों से छवियों तक लेकर HTML के स्निपेट तक कुछ भी करने के लिए)। यही कारण है कि मैं एक वास्तविक वस्तु को पारित करना चाहता हूं, इसलिए मैं इसे प्रस्तुत करने के तरीके के बारे में जानने के लिए आवश्यक चीजों को निर्दिष्ट करने के लिए डेटा संलग्न कर सकता हूं।

एक वर्कअराउंड किसी ऑब्जेक्ट को पृष्ठ पर किसी अन्य चीज़ से अटैच करने के लिए jQuery के .data() का उपयोग करना है, और फिर बस सेटडाटा में चयनकर्ता स्ट्रिंग को पास करें ... लेकिन मुझे विशेष रूप से उस हैक का आनंद नहीं मिलता है।

यह भी साथ हल किया जा सकता jQuery यूआई के खींचने योग्य/droppable (और मैं पूरी तरह से किसी भी लाइब्रेरी का उपयोग कर का विरोध नहीं कर रहा हूँ), लेकिन जब से 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 
}); 

अब, चश्मा पढ़ने के बाद, मैं पूरी तरह समझ में क्यों यह विफल रहता है:

यहाँ समस्या है। जो मुझे समझ में नहीं आता है, वही है जो आखिरकार मैं प्राप्त करना चाहता हूं।

धन्यवाद

Answer 1

आप setData क्योंकि आप केवल दुकान तार कर सकते हैं उपयोग करने से पहले JSON.stringify करने के लिए वस्तु पास करना चाहिए।

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

और इसका उल्टा आप एक वस्तु के लिए स्ट्रिंग reconvert करने के लिए है:

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

this देखें काम कर फिडल

Answer 2

हो सकता है कि मैं क्या के बारे में सुझाव देने के लिए कर रहा हूँ गलत है (यदि ऐसा है तो मैं क्यों सुनकर खुशी होगी)। क्यों संदर्भित करने के लिए आपको क्या चाहिए उदाहरण के लिए, 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(); 
});