[发明专利]一种不规则DIV动态布局方法

摘要

一种不规则DIV动态布局方法，在一个空白的页面上面，通过新增DIV单元的算法实现初步页面布局，DIV单元用于设置微件，在所述初步页面布局上拖拽DIV单元，同时保证页面布局的有序性。本发明在报表这样的元素布局比较任意，定制化层度高，非常多样化的页面上，实现页面元素的模块化改造，成为可替换、可拖动、可复用的组件，也就是页面元素的动态布局，使其可初始化，可动态布局，可拖动。

主权项

一种不规则DIV动态布局方法，其特征是在一个空白的报表页面上面，通过新增DIV单元的算法实现初步页面布局，DIV单元用于设置微件，在所述初步页面布局上拖拽DIV单元，同时保证页面布局的有序性，完成DIV动态布局，包括以下步骤：1)新增DIV单元算法：设置页面布局的结构等分为N列，每列宽度自定义，每列的宽度权重为1，一行权重总和为N，新增DIV单元时，对DIV单元设定宽度权重以及所在列的位置，DIV单元的宽度权重不超过N，每新增一个DIV单元的步骤如下：101)计算页面布局结构中每一列的高度，根据新增DIV单元的宽度权重判断插入列的位置，宽度权重为n的DIV单元，n＝1,2,…,N‑1，计算第1～n列的高度，选择最小值作为插入列，当新增DIV单元的宽度权重为N，默认选择第一列作为插入列；102)计算当前页面布局总行数；103)将当前页面布局总行数加+1作为插入行，即每增加一个DIV单元，原总行数就+1；104)在页面布局的数据结构中增加新增DIV单元的数据结构，设每一行数据结构为DIV[D1,D2,…DN]，Di表示要设置的微件，i＝1，2…N，一行的某一列没有微件，则Di＝NULL，Di＝‑1表示前一列DIV单元的宽度权重延伸到当前列；105)在页面布局的数据结构中更新当前DIV单元的详细信息，包括宽度、高度、上边距、左边距、以及新增DIV单元所在行的行信息和列信息；106)计算新增DIV单元的WIDTH，TOP和LEFT；107)创建新增DIV单元主体框架，包括上下左右边框，以及框架的样式，用以呈现具体化的界面展示设计；108)给新增DIV单元添加拖拽事件，用于实现通过鼠标拖拽此DIV单元；109)异步加载新增DIV单元内容，即设置的微件；110)重新绘制全局DIV展现，得到初步页面布局；2)动态拖拽DIV单元：201)鼠标点击待移动DIV单元；202)计算鼠标的TOP，LEFT；203)计算待移动DIV单元的WIDTH，HEIGHT，TOP和LEFT；204)判定模拟框是否存在，如果没有则创建，有就显示，所述模拟框为模拟结果响应区，模拟框对应于待移动DIV单元，用于拖拽过程中对拖拽目标位置的准确定位；205)鼠标移动，此时待移动DIV单元也跟着鼠标移动；206)实时计算鼠标的TOP，LEFT；207)循环遍历DIV单元的数据结构数组；208)根据步骤206)和207)的数据比对，判定鼠标当前在哪个目标DIV单元上，目标DIV单元的位置即为待移动DIV单元要拖拽到的位置；209)判定鼠标是否到达页面布局的展示边际，如果是，将页面布局展示最顶部或最底部的DIV单元上部分作为热区，热区部分用于与模拟框对应插入，如果否，则进行步骤210)；210)判定在鼠标在目标DIV单元的上下左右哪个地方；211)判断待移动DIV单元的宽度权重与目标DIV单元的宽度权重是否匹配，在目标DIV单元周围显示热区；212)根据模拟框与热区的对应，模拟显示待移动DIV单元的移动效果，确定待移动DIV单元到达预定位置后，鼠标松开；213)计算此时鼠标的TOP和LEFT；214)判定鼠标是否在待移动DIV单元自身范围内，如果是则进行215)，如果否则进行216)；215)待移动DIV单元移动到目标位置，完成移动操作，进行216)；216)隐藏之前创建的模拟框；217)修改DIV单元数组，保存最新的布局数据，完成动态布局。