可視化H5布局器(Magical Drag)

Magical Drag是基于h5實現(xiàn)的自由布局器，拖拖拽拽就能滿足您的設(shè)想，即時預(yù)覽布局；如果再結(jié)合我們的代碼生成器，更能讓你在自動生成基本的管理后臺功能后，再次隨心所欲的修改界面布局。有需要的小伙伴歡迎來西西下載體驗。

使用方法：

軟件都在html里面

您可以使用idea直接打開start.html 總之必須采用localhost方式打開

windows用戶直接雙擊啟動.bat 即可 打開瀏覽器訪問 http://localhost:12345/magicaldrag/start.html 請盡量使用chrome訪問 獲取最優(yōu)體驗

手動啟動：雙擊ngxin.exe 打開瀏覽器訪問 http://localhost:12345/magicaldrag/start.html

更新日志：

callback.js中增加

    before_click_left_component_to_center

    after_click_left_component_to_center

    增加 right_menu配置 可以自定義右鍵面板菜單功能

屬性

    標(biāo)題采用友好的tooltips,只需要配置屬性的tooltip

    增加節(jié)點是否可以拖拽寬高配置

增加其他UI框架 AntDesign,Vant,Miniui,Vuetify

支持多個key并存校驗 減少多種環(huán)境切換的麻煩

key.js中采用

            /*軟件運行允許的域名對：防破解 具體配置在application-env.js*/

            keys:env.keys,

application-env.js中采用

            keys:[

                {

                    //允許的域名

                    domain:"",

                    //發(fā)放的加密串 請咨詢www.magicalcoder.com

                    secret:"",

                }

            ]

增加表格的合并 拆分 新增行列 刪除行列

重構(gòu)部分文件目錄 更加精簡

index-xxx.html引入<script type="text/javascript" src="assets/drag/js/lib/redips/redips-table-min.js"></script>

同時注意新版此min文件所在目錄

常見問題答疑： 

問：此為深入使用布局器，期望有些組件的屬性比如下拉框 能夠動態(tài)的根據(jù)后臺返回來設(shè)置 

答：您需要使用布局器的api+callback便可實現(xiàn)，具體做法如下     

方案一：實時刷新調(diào)用         

在callabck.js的pre_build_attrs(每次在構(gòu)建屬性之前)里注入以下邏輯方法         

調(diào)用api.getConstant()拿到constant.js的實例，然后動態(tài)修改this.rightPanel的某個組件的屬性         

最后需要調(diào)用一下api.refreshRightAttrPane();使之生效     

方案二：僅在布局器加載后調(diào)用一次         

在callback.js的after_start(布局器加載完畢)         

里注入以下邏輯方法         

調(diào)用api.getConstant()拿到constant.js的實例，然后動態(tài)修改this.rightPanel的某個組件的屬性         

最后需要調(diào)用一下api.refreshWorkspace();使之生效 以上方案同樣適用于自定義左側(cè)組件源     

最后調(diào)用一下api.rebuildLeftComponents();刷新一次左側(cè)源的事件