CN108052322A - 一种基于可视化布局系统的拖拽方法 - Google Patents

一种基于可视化布局系统的拖拽方法 Download PDF

Info

Publication number
CN108052322A
CN108052322A CN201711478815.0A CN201711478815A CN108052322A CN 108052322 A CN108052322 A CN 108052322A CN 201711478815 A CN201711478815 A CN 201711478815A CN 108052322 A CN108052322 A CN 108052322A
Authority
CN
China
Prior art keywords
target widget
target
method based
visual layout
database
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201711478815.0A
Other languages
English (en)
Inventor
陈阳羽
魏强
余文富
樊文有
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Tian Yao Grand Plan Science And Technology Ltd
Original Assignee
Individual
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Individual filed Critical Individual
Priority to CN201711478815.0A priority Critical patent/CN108052322A/zh
Publication of CN108052322A publication Critical patent/CN108052322A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

一种基于可视化布局系统的拖拽方法
技术领域
本发明涉及计算机技术领域，特别是指一种基于可视化布局系统的拖拽方法。
背景技术
bootstrap可视化布局系统是一款可在线拖放排序、在线编辑的可视化编辑器，为手机、平板电脑、笔记本、小型台式机、大型宽屏台式机等添加了响应特性。
定义组件模板，包括布局组件及交互组件，container(容器，存放数据的一个结构，比如可以顺序存放、也可以像集合一样杂乱。)定义成sortable(可排序的)，基于jquery-ui-sortable(Java里面的一个容器)，组件设置ui-draggable(java里面的一个可拖放的控件),部分交互组件还会contenteditable(内容可编辑的)，或者其它需要的特性。
拖拽组件，dragstart(拖拽开始)时clone(生成被选元素的副本)的背景element(元素)为相应模板，dragend(拖拽结束)之后模板自动填充到container中。它是固定模式的可视化布局，实现页面的简单搭建，代码的可利用性低，无法实现前后端数据的绑定。
发明内容
有鉴于此，本发明的目的在于提出一种基于可视化布局系统的拖拽方法，能够实现可视化布局系统的页面快速搭建。
基于上述目的本发明提供的一种基于可视化布局系统的拖拽方法，包括：
选择要拖拽的目标控件，并记录所述目标控件的类型；
拖拽所述目标控件至目标位置，根据所述目标控件的类型设置弹框，所述弹框记录数据库字段；
所述弹框将数据库字段与所述目标控件进行绑定，所述目标控件根据数据库字段与后台数据库进行交互，并统计交互字段；
将统计的交互字段返回给所述目标控件，并展现在所述目标控件上。
可选的，选择要拖拽的目标控件，并记录所述目标控件的类型包括：根据业务需求选择拖拽需要的页面布局容器。
可选的，拖拽所述目标控件至目标位置包括：根据鼠标事件记录鼠标按下、移动和抬起事件。
可选的，所述目标控件的类型包括文本类型控件和图表类型控件。
可选的，所述拖拽方法还包括：
选择要拖拽的图表类型控件；
拖拽图表至目标位置，弹框弹出，弹框记录数据库字段；
所述弹框将数据库字段绑定到图表上，图表根据数据库字段与后台数据库进行交互，并统计交互字段；
将统计的交互字段返回给图表，并展现在图表上。
从上面所述可以看出，本发明提供的一种基于可视化布局系统的拖拽方法，应用于敏捷开放平台，通过设置弹框将数据库字段与目标控件进行绑定，目标控件根据数据库字段与后台数据库进行交互，方便快捷地在网页中插入插件、拖放定位，灵活设置插件边框风格和插件显示参数，网页排版完全可视化，快速搭建或修改页面可视化布局，同步后端数据同步编码，实现前后端数据的交互。
本发明提供的一种基于可视化布局系统的拖拽方法，基于成熟的jquery ui框架，敏捷开放平台可视化拖放排版模式与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：拖拽图表至目标位置，弹框弹出，弹框记录数据库字段，所述弹框将数据库字段绑定到图表上。
从上述实施例可以看出，本发明实施例提供的一种基于可视化布局系统的拖拽方法，应用于敏捷开放平台，通过设置弹框将数据库字段与目标控件进行绑定，目标控件根据数据库字段与后台数据库进行交互，方便快捷地在网页中插入插件、拖放定位，灵活设置插件边框风格和插件显示参数，网页排版完全可视化，快速搭建或修改页面可视化布局，同步后端数据同步编码，实现前后端数据的交互。
本发明提供的一种基于可视化布局系统的拖拽方法，基于成熟的jquery ui框架，敏捷开放平台可视化拖放排版模式与bootstrap可视化布局系统相结合的思想，提高了开发人员的开发速度，节省了时间成本、人力成本和物理成本。
所属领域的普通技术人员应当理解：以上任何实施例的讨论仅为示例性的，并非旨在暗示本公开的范围(包括权利要求)被限于这些例子；在本发明的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，步骤可以以任意顺序实现，并存在如上所述的本发明的不同方面的许多其它变化，为了简明它们没有在细节中提供。
本发明的实施例旨在涵盖落入所附权利要求的宽泛范围之内的所有这样的替换、修改和变型。因此，凡在本发明的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (5)

1.一种基于可视化布局系统的拖拽方法，其特征在于，包括：
选择要拖拽的目标控件，并记录所述目标控件的类型；
拖拽所述目标控件至目标位置，根据所述目标控件的类型设置弹框，所述弹框记录数据库字段；
所述弹框将数据库字段与所述目标控件进行绑定，所述目标控件根据数据库字段与后台数据库进行交互，并统计交互字段；
将统计的交互字段返回给所述目标控件，并展现在所述目标控件上。
2.根据权利要求1所述的一种基于可视化布局系统的拖拽方法，其特征在于，选择要拖拽的目标控件，并记录所述目标控件的类型包括：根据业务需求选择拖拽需要的页面布局容器。
3.根据权利要求1所述的一种基于可视化布局系统的拖拽方法，其特征在于，拖拽所述目标控件至目标位置包括：根据鼠标事件记录鼠标按下、移动和抬起事件。
4.根据权利要求1所述的一种基于可视化布局系统的拖拽方法，其特征在于，所述目标控件的类型包括文本类型控件和图表类型控件。
5.根据权利要求1所述的一种基于可视化布局系统的拖拽方法，其特征在于，所述拖拽方法还包括：
选择要拖拽的图表类型控件；
拖拽图表至目标位置，弹框弹出，弹框记录数据库字段；
所述弹框将数据库字段绑定到图表上，图表根据数据库字段与后台数据库进行交互，并统计交互字段；
将统计的交互字段返回给图表，并展现在图表上。
CN201711478815.0A 2017-12-29 2017-12-29 一种基于可视化布局系统的拖拽方法 Pending CN108052322A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201711478815.0A CN108052322A (zh) 2017-12-29 2017-12-29 一种基于可视化布局系统的拖拽方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711478815.0A CN108052322A (zh) 2017-12-29 2017-12-29 一种基于可视化布局系统的拖拽方法

Publications (1)

Publication Number Publication Date
CN108052322A true CN108052322A (zh) 2018-05-18

Family

ID=62129013

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711478815.0A Pending CN108052322A (zh) 2017-12-29 2017-12-29 一种基于可视化布局系统的拖拽方法

Country Status (1)

Country Link
CN (1) CN108052322A (zh)

Cited By (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108897471A (zh) * 2018-06-25 2018-11-27 万翼科技有限公司 排班任务设置方法、装置和计算机可读存储介质
CN109213765A (zh) * 2018-08-20 2019-01-15 中国平安人寿保险股份有限公司 数据表关联的方法、装置、计算机设备和存储介质
CN109918607A (zh) * 2019-03-20 2019-06-21 杭州网易再顾科技有限公司 页面搭建方法及装置、介质和计算设备
CN109992268A (zh) * 2019-03-29 2019-07-09 携程旅游信息技术（上海）有限公司 弹框实现方法、装置、电子设备、存储介质
CN110427233A (zh) * 2019-06-26 2019-11-08 北京三快在线科技有限公司 后台数据绑定方法、装置、电子设备及存储介质
CN111258474A (zh) * 2020-01-15 2020-06-09 广东三维家信息科技有限公司 基于gui的交互方法、装置及电子设备
CN112000328A (zh) * 2020-09-04 2020-11-27 赞同科技股份有限公司 一种页面可视化编辑方法、装置及设备
CN112464073A (zh) * 2020-11-05 2021-03-09 杭州讯酷科技有限公司 一种根据查询页面设计结果自动生成详细页面及新增表单页面的方法
CN112463151A (zh) * 2020-11-03 2021-03-09 杭州讯酷科技有限公司 一种基于数据源的可视化页面构筑方法
CN113282656A (zh) * 2021-04-13 2021-08-20 国网山东省电力公司物资公司 一种基于大数据的拖拽式可视化方法及系统
CN113821147A (zh) * 2020-06-19 2021-12-21 西安诺瓦星云科技股份有限公司 按键绑定方法、装置以及系统
CN113946267A (zh) * 2021-10-20 2022-01-18 百融至信(北京)征信有限公司 一种基于移动端的返回操作方法及系统
CN114860129A (zh) * 2022-05-09 2022-08-05 数研院(福建)信息产业发展有限公司 一种可视化建模方法和系统

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7831918B2 (en) * 2005-09-12 2010-11-09 Microsoft Corporation Content based user interface design
CN102495735A (zh) * 2011-12-14 2012-06-13 方正国际软件有限公司 web 端UI组件应用框架系统
CN105653644A (zh) * 2015-12-28 2016-06-08 北京中电普华信息技术有限公司 一种页面构造器及页面构造方法
CN106528741A (zh) * 2016-11-04 2017-03-22 浪潮软件集团有限公司 一种基于大数据的可视化实现方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7831918B2 (en) * 2005-09-12 2010-11-09 Microsoft Corporation Content based user interface design
CN102495735A (zh) * 2011-12-14 2012-06-13 方正国际软件有限公司 web 端UI组件应用框架系统
CN105653644A (zh) * 2015-12-28 2016-06-08 北京中电普华信息技术有限公司 一种页面构造器及页面构造方法
CN106528741A (zh) * 2016-11-04 2017-03-22 浪潮软件集团有限公司 一种基于大数据的可视化实现方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
张暑军等: "《基于HTML5的APP开发教程》", 30 November 2016, 北京理工大学出版社 *

Cited By (18)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108897471A (zh) * 2018-06-25 2018-11-27 万翼科技有限公司 排班任务设置方法、装置和计算机可读存储介质
CN109213765A (zh) * 2018-08-20 2019-01-15 中国平安人寿保险股份有限公司 数据表关联的方法、装置、计算机设备和存储介质
CN109918607A (zh) * 2019-03-20 2019-06-21 杭州网易再顾科技有限公司 页面搭建方法及装置、介质和计算设备
CN109992268A (zh) * 2019-03-29 2019-07-09 携程旅游信息技术（上海）有限公司 弹框实现方法、装置、电子设备、存储介质
CN109992268B (zh) * 2019-03-29 2022-12-20 携程旅游信息技术（上海）有限公司 弹框实现方法、装置、电子设备、存储介质
CN110427233A (zh) * 2019-06-26 2019-11-08 北京三快在线科技有限公司 后台数据绑定方法、装置、电子设备及存储介质
CN111258474A (zh) * 2020-01-15 2020-06-09 广东三维家信息科技有限公司 基于gui的交互方法、装置及电子设备
CN111258474B (zh) * 2020-01-15 2021-07-06 广东三维家信息科技有限公司 基于gui的交互方法、装置及电子设备
CN113821147A (zh) * 2020-06-19 2021-12-21 西安诺瓦星云科技股份有限公司 按键绑定方法、装置以及系统
CN112000328A (zh) * 2020-09-04 2020-11-27 赞同科技股份有限公司 一种页面可视化编辑方法、装置及设备
CN112000328B (zh) * 2020-09-04 2023-12-01 赞同科技股份有限公司 一种页面可视化编辑方法、装置及设备
CN112463151A (zh) * 2020-11-03 2021-03-09 杭州讯酷科技有限公司 一种基于数据源的可视化页面构筑方法
CN112463151B (zh) * 2020-11-03 2024-02-06 杭州讯酷科技有限公司 一种基于数据源的可视化页面构筑方法
CN112464073B (zh) * 2020-11-05 2022-11-11 杭州讯酷科技有限公司 一种根据查询页面设计结果自动生成详细页面及新增表单页面的方法
CN112464073A (zh) * 2020-11-05 2021-03-09 杭州讯酷科技有限公司 一种根据查询页面设计结果自动生成详细页面及新增表单页面的方法
CN113282656A (zh) * 2021-04-13 2021-08-20 国网山东省电力公司物资公司 一种基于大数据的拖拽式可视化方法及系统
CN113946267A (zh) * 2021-10-20 2022-01-18 百融至信(北京)征信有限公司 一种基于移动端的返回操作方法及系统
CN114860129A (zh) * 2022-05-09 2022-08-05 数研院(福建)信息产业发展有限公司 一种可视化建模方法和系统

Similar Documents

Publication Publication Date Title
CN108052322A (zh) 一种基于可视化布局系统的拖拽方法
US12099799B2 (en) System and method providing responsive editing and viewing, integrating hierarchical fluid components and dynamic layout
CN104090979B (zh) 一种网页编辑方法及装置
JP6029767B2 (ja) アイコン整理方法、装置、機器、プログラム及び記録媒体
US20140047308A1 (en) Providing note based annotation of content in e-reader
KR101686691B1 (ko) 계층적-체계화된 컨트롤 갤러리들
US8775472B2 (en) Dynamic presentation framework
CN103430140B (zh) 用于管理便携式终端的剪贴板上项目的方法和装置
WO2016054549A1 (en) Application prototyping tool
KR20190077473A (ko) 그래픽이 보강된 템플릿 기반 캘린더 이벤트
WO2014187285A2 (zh) 面向普通用户应用的界面编辑、运行系统及方法
CN103518195B (zh) 用于基于矢量的表格字段文档的设备、系统和方法
JPH08505970A (ja) 国際データ処理システム
CN109614601A (zh) 基于web的表格处理方法、装置、设备及可读介质
WO2013108139A2 (en) Designing website user controls
JPH08501401A (ja) オブジェクト指向通知フレームワークシステム
JPH08505719A (ja) メニュー・ステート・システム
CN109375914A (zh) 信息远程交互方法和系统
CN105824517B (zh) 一种桌面的实现方法和装置
CN103258015A (zh) 一种基于xml动态生成问卷的方法
US9910835B2 (en) User interface for creation of content works
DE202014010899U1 (de) Unterstützung von Benutzerinteraktionen mit wiedergegebenen Grafikobjekten
CN116663517A (zh) 基于工作流表单系统数据交互与输入内容单屏式操作方法
WO2013138242A1 (en) Dynamic content presentations
CN112445501A (zh) 数据烧录方法及设备、计算机可读存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right

Effective date of registration: 20191107

Address after: 100193 room 2340, building No. 2, Beijing Zhongguancun Software Park incubator, Beijing Zhongguancun, Haidian District, Northeast China

Applicant after: Beijing Tian Yao grand plan Science and Technology Ltd.

Address before: 100193 room 2340, building No. 2, Beijing Zhongguancun Software Park incubator, Beijing Zhongguancun, Haidian District, Northeast China

Applicant before: Chen Han

TA01 Transfer of patent application right
RJ01 Rejection of invention patent application after publication

Application publication date: 20180518

RJ01 Rejection of invention patent application after publication