[发明专利]一种基于可视化布局系统的拖拽方法

说明书

本发明公开了一种基于可视化布局系统的拖拽方法，包括：选择要拖拽的目标控件，并记录所述目标控件的类型；拖拽所述目标控件至目标位置，根据所述目标控件的类型设置弹框，所述弹框记录数据库字段；所述弹框将数据库字段与所述目标控件进行绑定，所述目标控件根据数据库字段与后台数据库进行交互，并统计交互字段；将统计的交互字段返回给所述目标控件，并展现在所述目标控件上。本发明提出一种基于可视化布局系统的拖拽方法，能够实现页面的快速搭建。

技术领域

本发明涉及计算机技术领域，特别是指一种基于可视化布局系统的拖拽方法。

背景技术

bootstrap可视化布局系统是一款可在线拖放排序、在线编辑的可视化编辑器，为手机、平板电脑、笔记本、小型台式机、大型宽屏台式机等添加了响应特性。

定义组件模板，包括布局组件及交互组件，container(容器，存放数据的一个结构，比如可以顺序存放、也可以像集合一样杂乱。)定义成sortable(可排序的)，基于jquery-ui-sortable(Java里面的一个容器)，组件设置ui-draggable(java里面的一个可拖放的控件),部分交互组件还会contenteditable(内容可编辑的)，或者其它需要的特性。

拖拽组件，dragstart(拖拽开始)时clone(生成被选元素的副本)的背景element(元素)为相应模板，dragend(拖拽结束)之后模板自动填充到container中。它是固定模式的可视化布局，实现页面的简单搭建，代码的可利用性低，无法实现前后端数据的绑定。

发明内容

有鉴于此，本发明的目的在于提出一种基于可视化布局系统的拖拽方法，能够实现可视化布局系统的页面快速搭建。

基于上述目的本发明提供的一种基于可视化布局系统的拖拽方法，包括：

选择要拖拽的目标控件，并记录所述目标控件的类型；

拖拽所述目标控件至目标位置，根据所述目标控件的类型设置弹框，所述弹框记录数据库字段；

所述弹框将数据库字段与所述目标控件进行绑定，所述目标控件根据数据库字段与后台数据库进行交互，并统计交互字段；

将统计的交互字段返回给所述目标控件，并展现在所述目标控件上。

可选的，选择要拖拽的目标控件，并记录所述目标控件的类型包括：根据业务需求选择拖拽需要的页面布局容器。

可选的，拖拽所述目标控件至目标位置包括：根据鼠标事件记录鼠标按下、移动和抬起事件。

可选的，所述目标控件的类型包括文本类型控件和图表类型控件。

可选的，所述拖拽方法还包括：

选择要拖拽的图表类型控件；

拖拽图表至目标位置，弹框弹出，弹框记录数据库字段；

所述弹框将数据库字段绑定到图表上，图表根据数据库字段与后台数据库进行交互，并统计交互字段；

将统计的交互字段返回给图表，并展现在图表上。

从上面所述可以看出，本发明提供的一种基于可视化布局系统的拖拽方法，应用于敏捷开放平台，通过设置弹框将数据库字段与目标控件进行绑定，目标控件根据数据库字段与后台数据库进行交互，方便快捷地在网页中插入插件、拖放定位，灵活设置插件边框风格和插件显示参数，网页排版完全可视化，快速搭建或修改页面可视化布局，同步后端数据同步编码，实现前后端数据的交互。

本发明提供的一种基于可视化布局系统的拖拽方法，基于成熟的jquery ui框架，敏捷开放平台可视化拖放排版模式与bootstrap可视化布局系统相结合的思想，提高了开发人员的开发速度，节省了时间成本、人力成本和物理成本。