Magical Drag(H5布局器)

Magical Drag(H5布局器)是一款轻巧精巧的数据可视化H5布局器，你无需过多的懂得专业的编程代码，使用它就能快速生成一个美观的H5页面，拖拖拽拽就能满足您的设想，即时预览布局

【功能介绍】

基于h5实现的自由布局器，拖拖拽拽就能满足您的设想，即时预览布局；如果再结合我们的代码生成器，更能让你在自动生成基本的管理后台功能后，再次随心所欲的修改界面布局。更多功能体验...

适合人群：程序员、产品经理

【注意事项】

整个路径不要包含中文否则无法启动

【使用方法】

软件都在html里面

您可以使用idea直接打开start.html 总之必须采用localhost方式打开

windows用户直接双击启动.bat 即可 打开浏览器访问 http://localhost:12345/magicaldrag/start.html 请尽量使用chrome访问 获取最优体验

手动启动：双击ngxin.exe 打开浏览器访问 http://localhost:12345/magicaldrag/start.html

【常见问题答疑】

问：此为深入使用布局器，期望有些组件的属性比如下拉框 能够动态的根据后台返回来设置 

答：您需要使用布局器的api+callback便可实现，具体做法如下     

方案一：实时刷新调用         

在callabck.js的pre_build_attrs(每次在构建属性之前)里注入以下逻辑方法         

调用api.getConstant()拿到constant.js的实例，然后动态修改this.rightPanel的某个组件的属性         

最后需要调用一下api.refreshRightAttrPane();使之生效     

方案二：仅在布局器加载后调用一次         

在callback.js的after_start(布局器加载完毕)         

里注入以下逻辑方法         

调用api.getConstant()拿到constant.js的实例，然后动态修改this.rightPanel的某个组件的属性         

最后需要调用一下api.refreshWorkspace();使之生效 以上方案同样适用于自定义左侧组件源     

最后调用一下api.rebuildLeftComponents();刷新一次左侧源的事件