自定义表单拖拽布局功能模块需求书-20130709.pdfVIP

2013 自定义表单--页面控 件拖拽布局模块 需求说明书 本需求说明书内容包括：具体需求描述、页面抓图举例、技术实现细节建议 等。 George SJ Software 2013/7/9 文档属性 文档创建时间： 2013-07-09 文档版本： V 1.0 历史修订记录： 2013-07-09 George 创建文档 目录 1 需求描述 2 1.1 名词定义和解释 2 1.2 需求详细说明 2 2 页面举例 4 3 技术建议 4 4 开发要求 4 5 联系及其他 5 1 需求描述 1.1 名词定义和解释  自定义表单：一个form 表单页面内，输入框（包括text 、textarea 、radio、select 等等）的数量和 位置可以动态调整，普通的form 表单页面内，输入框的数量和位置都是固定的，但是在“自定义 表单”页面中，输入框的数量可以增加和减少，输入框的位置也可以通过拖拽来实现自定义布局。  页面输入框：一个页面输入框就就是页面上的一个可输入区域，英文叫做input field 可输入字段， 但是这个input field 不仅仅指input type=”text” id=”testField” /这样的文本输入框，还包括text、 textarea 、radio、select 等等，也就是所有html form 中可视化的可以输入或选择数据的页面元素， 都是“页面输入框”。  可拖拽控件：在本文档中，“可拖拽控件”是指 一个页面输入框 + 它对应的label 标签 所组成的 一个页面元素组合，这个页面元素组合可以被放在一个 div 容器内，也可以被放在其他 html 容器 内，比如span 等，具体实现由开发者自己来选择，这样一个由 一个页面输入框 + 它对应的label 标签 + 它们所在的外层容器 所组成页面元素组合，就叫做一个“页面控件”，要求这个“页面控 件”在页面内可以自由被拖拽，实现通过拖拽自由布局，则这个“页面控件”就叫做一个“可拖拽 控件”。 1.2 需求详细说明 “自定义表单—页面控件拖拽布局模块”是一个这样的功能模块： 它可以实现一个form 页面内所有“可拖拽控件”可以通过被拖拽，实 现控件位置的自由排列。 这种“自由排列”不仅仅指一个“可拖拽控件”从表格的A 单元 格位置拖拽到相同大小 B 单元格位置，还要实现这个“可拖拽控件” 可以跨单元格，也就是：如果一个“可拖拽控件” widget A 的宽度 比较宽，比如它的宽度是其他控件宽度的1.5 倍，则当这个 widget A 拖拽到另一个位置的时候，则它会将它右侧的控件“挤”走，它自己 独占2 个单元格的位置，它后面的控件自动被挤到第三个单元格的位 置。 “页面控件拖拽布局”这个功能模块，如果使用普通的table 布局无法实现，可以使用div + CSS 来实现，如果使用普通的table 布局，很难实现“跨单元格”的操作，但是如果使用div + CSS 来布局，则比较容易一些，因为浏览器默认是“流式布局”，只要 控件的高度和宽度定义好了，则比较容易控制它们的位置。 实现此功能时，不能使用绝对坐标来可以页面控件的位置，因 为使用绝对的X 轴Y 轴坐标来定义控件的位置的话，如果页面大小 缩放，则会出现页面控件跑到了窗口可见区域之外