本发明涉及计算机
技术领域：
：，特别是指一种基于可视化布局系统的拖拽方法。
背景技术：
：：bootstrap可视化布局系统是一款可在线拖放排序、在线编辑的可视化编辑器，为手机、平板电脑、笔记本、小型台式机、大型宽屏台式机等添加了响应特性。定义组件模板，包括布局组件及交互组件，container(容器，存放数据的一个结构，比如可以顺序存放、也可以像集合一样杂乱。)定义成sortable(可排序的)，基于jquery-ui-sortable(java里面的一个容器)，组件设置ui-draggable(java里面的一个可拖放的控件),部分交互组件还会contenteditable(内容可编辑的)，或者其它需要的特性。拖拽组件，dragstart(拖拽开始)时clone(生成被选元素的副本)的背景element(元素)为相应模板，dragend(拖拽结束)之后模板自动填充到container中。它是固定模式的可视化布局，实现页面的简单搭建，代码的可利用性低，无法实现前后端数据的绑定。技术实现要素：有鉴于此，本发明的目的在于提出一种基于可视化布局系统的拖拽方法，能够实现可视化布局系统的页面快速搭建。基于上述目的本发明提供的一种基于可视化布局系统的拖拽方法，包括：选择要拖拽的目标控件，并记录所述目标控件的类型；拖拽所述目标控件至目标位置，根据所述目标控件的类型设置弹框，所述弹框记录数据库字段；所述弹框将数据库字段与所述目标控件进行绑定，所述目标控件根据数据库字段与后台数据库进行交互，并统计交互字段；将统计的交互字段返回给所述目标控件，并展现在所述目标控件上。可选的，选择要拖拽的目标控件，并记录所述目标控件的类型包括：根据业务需求选择拖拽需要的页面布局容器。可选的，拖拽所述目标控件至目标位置包括：根据鼠标事件记录鼠标按下、移动和抬起事件。可选的，所述目标控件的类型包括文本类型控件和图表类型控件。可选的，所述拖拽方法还包括：选择要拖拽的图表类型控件；拖拽图表至目标位置，弹框弹出，弹框记录数据库字段；所述弹框将数据库字段绑定到图表上，图表根据数据库字段与后台数据库进行交互，并统计交互字段；将统计的交互字段返回给图表，并展现在图表上。从上面所述可以看出，本发明提供的一种基于可视化布局系统的拖拽方法，应用于敏捷开放平台，通过设置弹框将数据库字段与目标控件进行绑定，目标控件根据数据库字段与后台数据库进行交互，方便快捷地在网页中插入插件、拖放定位，灵活设置插件边框风格和插件显示参数，网页排版完全可视化，快速搭建或修改页面可视化布局，同步后端数据同步编码，实现前后端数据的交互。本发明提供的一种基于可视化布局系统的拖拽方法，基于成熟的jqueryui框架，敏捷开放平台可视化拖放排版模式与bootstrap可视化布局系统相结合的思想，提高了开发人员的开发速度，节省了时间成本、人力成本和物理成本。附图说明为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1为本发明提供的一种基于可视化布局系统的拖拽方法的第一个实施例的拖拽流程示意图；图2为本发明提供的一种基于可视化布局系统的拖拽方法的第二个实施例的拖拽流程示意图；图3为本发明提供的一种基于可视化布局系统的拖拽方法的实施例的图表数据绑定流程示意图。具体实施方式为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明进一步详细说明。基于上述目的，本发明的实施例提出了一种基于可视化布局系统的拖拽方法，能够实现可视化布局系统的页面快速搭建。如图1所示，为本发明提供的一种基于可视化布局系统的拖拽方法的第一个实施例的拖拽流程示意图；本发明提供的一种基于可视化布局系统的拖拽方法，包括：步骤101：选择要拖拽的目标控件，并记录所述目标控件的类型；步骤102：拖拽所述目标控件至目标位置，根据所述目标控件的类型设置弹框，所述弹框记录数据库字段；步骤103：所述弹框将数据库字段与所述目标控件进行绑定，所述目标控件根据数据库字段与后台数据库进行交互，并统计交互字段；步骤104：将统计的交互字段返回给所述目标控件，并展现在所述目标控件上。进一步的，步骤101：选择要拖拽的目标控件，并记录所述目标控件的类型包括：根据业务需求选择拖拽需要的页面布局容器。步骤102：拖拽所述目标控件至目标位置包括：根据鼠标事件记录鼠标按下、移动和抬起事件。本发明利用可视化拖放排版模式，在已有的bootstrap可视化布局系统编辑器的基础上，把页面的元素标签拆分成一个个小的控件，利用拖拽的方式去结合出新的页面，通过类名控制拖拽控件和后台数据同步绑定，拖拽源码与底层代码同步更新，实现前后台可视化零编码，同时也缩短了开发时间，大幅度减少开发人员的工作量，并且避免了冗余代码。如图2所示，为本发明提供的一种基于可视化布局系统的拖拽方法的第二个实施例的拖拽流程示意图；步骤201：根据业务需求在敏捷可视区打开一个页面，选择要拖拽的目标控件；步骤202和步骤203：拖拽所述目标控件至目标位置，所述目标控件的类型包括文本类型控件和图表类型控件。步骤204：根据所述目标控件的类型设置弹框，所述弹框记录数据库字段；所述弹框将数据库字段与所述目标控件进行绑定，所述目标控件根据数据库字段与后台数据库进行交互，并统计交互字段；步骤205：将统计的交互字段返回给所述目标控件，并展现在所述目标控件上，并将所述目标控件拖拽到指定的页面位置。所述拖拽方法还包括：选择要拖拽的图表类型控件；拖拽图表至目标位置，弹框弹出，弹框记录数据库字段；所述弹框将数据库字段绑定到图表上，图表根据数据库字段与后台数据库进行交互，并统计交互字段；将统计的交互字段返回给图表，并展现在图表上。更进一步的，如图3所示，为本发明提供的一种基于可视化布局系统的拖拽方法的实施例的图表数据绑定流程示意图；步骤301：根据业务需求在敏捷可视区打开一个页面，选择要拖拽的图表类型控件；步骤302：添加图表中文和英文名；步骤303：选择数据库；步骤304：从选择的数据库中选择数据源；步骤305：从数据源中选出数据库；步骤306：从数据库中选出数据表；步骤307：从数据表中选出数据库字段；步骤308：拖拽图表至目标位置，弹框弹出，弹框记录数据库字段，所述弹框将数据库字段绑定到图表上。从上述实施例可以看出，本发明实施例提供的一种基于可视化布局系统的拖拽方法，应用于敏捷开放平台，通过设置弹框将数据库字段与目标控件进行绑定，目标控件根据数据库字段与后台数据库进行交互，方便快捷地在网页中插入插件、拖放定位，灵活设置插件边框风格和插件显示参数，网页排版完全可视化，快速搭建或修改页面可视化布局，同步后端数据同步编码，实现前后端数据的交互。本发明提供的一种基于可视化布局系统的拖拽方法，基于成熟的jqueryui框架，敏捷开放平台可视化拖放排版模式与bootstrap可视化布局系统相结合的思想，提高了开发人员的开发速度，节省了时间成本、人力成本和物理成本。所属领域的普通技术人员应当理解：以上任何实施例的讨论仅为示例性的，并非旨在暗示本公开的范围(包括权利要求)被限于这些例子；在本发明的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，步骤可以以任意顺序实现，并存在如上所述的本发明的不同方面的许多其它变化，为了简明它们没有在细节中提供。本发明的实施例旨在涵盖落入所附权利要求的宽泛范围之内的所有这样的替换、修改和变型。因此，凡在本发明的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本发明的保护范围之内。当前第1页12当前第1页12