I am working with two DND containers, SourceContainer and TargetContainer. The SourceContainer contains some JSON data as shown below:
Apple
Orange
Banana
This JSON is being used:
var json = {"fruits": [
{"fruitId": 1, "fruitName": "Apple", "fruitDesc": "This is an Apple"},
{"fruitId": 2, "fruitName": "Orange", "fruitDesc": "This is an Orange"},
{"fruitId": 3, "fruitName": "Banana", "fruitDesc": "This is a Banana"}
]
};
var results="";
for(var i=0; i<json.fruits.length; i++){
results += '<div class="dojoDndItem ">' + '<span style="visibility: hidden">' + json.fruits[i].fruitId + '</span>' + json.fruits[i].fruitName + '</div>';
}
In my SourceContainer:
<div><label>Fruits</label></div>
<div dojoType="dojo.dnd.Source" id="source1" copyonly="false" delay="8" class="container dojoDndSource dojoDndTarget dojoDndContainer">
<div dojoType="dojo.dnd.Source" ></div> results </div>
In my TargetContainer:
<div><label>Basket</label></div>
<div dojoType="dojo.dnd.Source" id="source2" copyonly="false" descending="true" delay="8" class="container dojoDndSource dojoDndTarget dojoDndContainer">
<div dojoType="dojo.dnd.Source" ></div>
</div>
<button id="toJsonBtn" data-dojo-type="dijit.form.Button" type="button">ToJson</button>
When I drag "Apple" and "Banana" to the TargetContainer and click the button, I need the data in TargetContainer to be converted to JSON format.
If you have any ideas on how to achieve this without using JQuery, please share. Thank you!
NOTE: Please do not use JQuery for this solution.