推荐一款可视化前端布局器H5-表单设计器（MagicalCoder）

今天给大家介绍一款高定制化的前端纯js的布局器

特性：

自由定制组件和属性	大量api，callback与布局器交互
同时支持可视化拖拽和编码并存设计	表格：合并 拆分 等功能
自由定位：任意位置都可以放置组件	响应式栅格布局自适应各设备端，一端设计多端运行
可视化js编写器	支持：echarts各类统计组件 同时可以联动后端数据 实时展示效果
代码可控：自定义各种事件 并且控制事件内容	版本更新迅速，bug修复迅雷不及掩耳
支持各类Vue ,Jquery的UI框架嵌入布局器 如：Element Antdesign  Vant Vuetify Layui Mini	导航树
完善的官方文档	右键操作面板
其他

如果您需要嵌入系统或者做定制个人的布局器 实在是首选  也不用再造轮子了 专心做自己的业务吧

先上一下体验地址

http://lowcode.magicalcoder.com/magicaldrag/start.html 

第一步：先预览下布局器吧 首次大家要加载资源 所以会略慢 耐心等待加载完 后续再打开就很快了

第二步：通过下面提供的api和回调函数 即可与布局器自由交互

/**
 * 获取布局器HTML源码
 * @return string
 */
MagicalApi.prototype.getHtml=function () {}
/**
 * 获取布局器脚本
 * @return string
 */
MagicalApi.prototype.getJavascript=function () {}
/**
 * 获取布局器根节点json
 * @return JSON
 */
MagicalApi.prototype.getRootNode=function () {}
/**
 * 能获取表单条目下的控件数据
 * @return JSON[]
 */
MagicalApi.prototype.getFormItemNodes = function (){}
/**
 * 插入源码到布局器
 * @param html  取值=""可以实现清空布局器 string
 */
MagicalApi.prototype.insertHtml=function (html) {}
/**
 * 插入javascript脚本 请尽量在insertHtml方法之后执行 因为大部分脚本操作的是html 必须先有html
 * @param javascript 不要="" 可以使用null来重置脚本 string
 */
MagicalApi.prototype.insertJavascript=function (javascript) {}
/**
 * 插入html javascript 常用于初始化布局器
 * @param html        取值=""可以实现清空布局器  string
 * @param javascript  取值=null可以实现重置布局器的脚本 千万不要为"" 否则默认脚本不支持 工作区不渲染 string
 */
MagicalApi.prototype.insert=function (html,javascript) {}
/**
 * 根据root 还原布局器
 * @param root