I have created AngularJS based drag and drop UI with the using Jquery. There are modules which are draggable and droppable. I have made these modules draggable and droppable but, I have to make some JSON for every module after dropping that. There are modules like Menu, User, Device and so on. When I will drag a Menu and drag further module under the Menu module that will be drag as per user sequence like on "1" drag device module, on "2" drag user module and so on, but there is default action as well and on that sequence "_" this should be put in the JSON. All the modules which will drag under the Menu module these all should be children of Menu or you can say that these all should be under the Menu module. And the complete JSON should be like as below:
{"flow":{"data":{"id":"30b5c624784400145d1abe0c3592d6db"},"module":
"menu","children":{"1":{"data":{"id":
"27a61a8272e4afa182040ea8c464455b"},"module":
"device","children":{}},"2":{"data":{"id":"d2e837eac2c5f5036673845
c08b572b6"},"module":"user","children":{}},"3":{"data":{"id":"27d77
b6b5b544115a562709820234efe"},"module":"device","children":{}},"5":
{"data":{"id":"4d02e2aaec1968b35e1a4cd245419e97","timeout":"20",
"can_call_self":false},"module":"user","children":{}},"_":{"data":
{"id":"052803186d73c0723a64f065a1ddc19a","timeout":"20",
"can_call_self":false},"module":"device","children":{}}}}}
The other module is single inheritance module that will be not multiple droppable only the Menu module is multiple droppable.
I have created a fiddle but getting no success, here is the fiddle