如何根据DOM节点来维护对应的数组对象JSON数据

Question

需求有点绕口。分步说明:
1、系统是通过拖拽生成页面。页面加载会维护一个全局的数组。
2、拖拽生成一个容器，就需要在数组里面添加一个对象。
3、组件拖拽到容器中，就在对应容器对象的widget属性中添加组件对象。
DEMO:

[
    {
        "components": [
            {
                "properties": {}
            },
            {
                "components": [
                    {
                        "properties": {}
                    },
                    {
                        "properties": {}
                    }
                ]
            }
        ]
    },
    {
        "components": [
            {
                "properties": {}
            }
        ]
    }
]

问题：
1、如何做到及时维护更新。
2、如何判断我拖拽放到了哪个容器中，拖拽方法使用jquery-ui，拖拽clone DOM 方式。