我做過類似的可視化編輯工具

總的思路在于一個中間文件，

你在拖拽的時候，生成一個布局文件，比如 layout.json

{
    type:'View',
    props:{
        x:10,
        y:10,
        //....
    },
    children:[
        {
            type:'Image',
            props:{
                src:'bg.png',
                //...
            }
        },
        {
            type:'Text',
            props:{
                txt:'一段文本',
                //...
            }
        }
    ]
}

然后可以根據(jù)layout.json解析成對應的頁面（Web）

<div>
    <img src="bg.png">
    <p>一段文本</p></div>

同時，這個布局文件也可以根據(jù)需要生成其他終端，比如安卓

希望我的建議有用，謝謝

可以參考H5DS，百度一下就可以了