CN104866176A - 一种图标拖动分组的导航方法 - Google Patents
一种图标拖动分组的导航方法 Download PDFInfo
- Publication number
- CN104866176A CN104866176A CN201510272291.4A CN201510272291A CN104866176A CN 104866176 A CN104866176 A CN 104866176A CN 201510272291 A CN201510272291 A CN 201510272291A CN 104866176 A CN104866176 A CN 104866176A
- Authority
- CN
- China
- Prior art keywords
- icon
- grouping
- drag
- dragging
- change position
- 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
Links
- 238000000034 method Methods 0.000 title abstract description 12
- 238000005096 rolling process Methods 0.000 claims abstract description 6
- 230000000694 effects Effects 0.000 claims description 3
- 230000003993 interaction Effects 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 3
- 230000002452 interceptive effect Effects 0.000 description 3
- 230000001747 exhibiting effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 238000012163 sequencing technique Methods 0.000 description 1
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明涉及基于网页的图标展示技术领域，特别是一种图标拖动分组的导航方法，设备图标拖动，点击需要改变位置或分组的设备图标并拖动；拖动到指定位置，当拖动图标到左右边界时使界面滚动到指定位置来完成更改位置或分组，当拖动图标到上下边界进入缩略视图以便于快速定位到指定位置来完成更改位置或分组；新排序位置保存，保存完成更改位置或分组的设备图标的位置信息。采用上述方法后，本发明增加了自由排序和分组并保存新排序的交互操作，拖动图标到左右边界时使界面滚动到指定位置来完成更改位置或分组的目的，拖动图标到上下边界进入缩略视图以便于快速定位到指定位置来完成更改位置或分组的目的，还可以进行批量更改位置或分组。
Description
技术领域
本发明涉及基于网页的图标展示技术领域，特别是一种图标拖动分组的导航方法。
背景技术
随着互联网的飞速发展，浏览器不再仅仅用来表示Web内容，随着HTML5技术的问世，Web进入了一个成熟的应用平台，在HTML5平台上，视频、音频、图像、动画，以及同电脑的交互都被标准化。如今人机交互、人网交互已经成为常态，我们已经不能满足于网页上简单的图片和文字展示，尤其在浏览器上管理云端文件、文件夹、应用等时，我们更希望能像本地操作系统那样只管的展示和操作。
目前基于网页的图标展示界面大多是在固定位置上的图标展示，缺少在网页上直接拖动更改位置以及对其分组并保存最新排序的交互操作。
中国发明专利申请CN 104216699A公开了一种基于HTML5的图标展示方法，包括以下步骤：通过从服务器中获取图标数据或从接收来自第三方应用的图标数据；对图标数据进行完善及对象化处理；根据处理后的图标数据进行图标图形的创建；对图标进行排序、分组地展示；
对所述图标进行排序、分组的展示还包括以下步骤：根据设置中的排列方式对图标数据进行重新排列；根据设置中的分组方式对图标数据进行分组；根据图标数据创建图标；通过计算图标位置将创建的图标有序地排列展示到图标展示版面；
对所述图标进行展示还包括根据图标的分组将图标分别放置在不同的区域，此方法尤其适用于基于HUML5的虚拟操作系统的桌面图标，如此将同一组图标放置在同一区域，方便用户对桌面图标进行查找，操作方便；
所述基于HTML5的展示方法还包括：通过界面交互模块对展示的图标设置用户操作监控，接收用户对图标进行修改的信息，将修改后的图标信息返回给服务器或第三方应用进行处理及保存；
所述界面交互模块还包括两种操作模式，一种为适用鼠标和键盘配合的操作模式，另一种为适用于触摸屏的操作模式。
上述发明专利申请中公开的自动排序、分组的方法，不是交互操作的方法，而且不利于快速方便的进行图标位置更改和分组操作。
发明内容
本发明需要解决的技术问题提供一种通过拖动图标到指定位置来实现更改位置和分组的导航方法。
为解决上述的技术问题，本发明一种图标拖动分组的导航方法，包括以下步骤，
设备图标拖动，点击需要改变位置或分组的设备图标并拖动；
拖动到指定位置，当拖动图标到左右边界时使界面滚动到指定位置来完成更改位置或分组，当拖动图标到上下边界进入缩略视图以便于快速定位到指定位置来完成更改位置或分组；
新排序位置保存，保存完成更改位置或分组的设备图标的位置信息。
进一步的，设备图标拖动时在设备图标的原始位置创建占位符。
进一步的，从缩略图完成排序分组并还原后对拖动设备图标加上闪烁效果。
进一步的，设备图标拖动时可以同时选中多个设备图标进行批量更改位置或分组。
更进一步的，进行批量更改位置或分组时，选中的多个设备图标上标示出设备图标的总数量。
采用上述方法后，本发明增加了自由排序和分组并保存新排序的交互操作，拖动图标到左右边界时使界面滚动到指定位置来完成更改位置或分组的目的，拖动图标到上下边界进入缩略视图以便于快速定位到指定位置来完成更改位置或分组的目的，还可以进行批量更改位置或分组。
附图说明
下面将结合附图和具体实施方式对本作进一步详细的说明。
图1为本发明设备图标组内或组间改变位置示意图。
图2为本发明设备图标拖动到指定位置示意图。
图3为本发明设备图标拖动进入缩略图的示意图。
图4为本发明多选图标进行批量更改位置的示意图。
图中：1为设备图标，2为占位符，3为拖动中的设备图标
具体实施方式
本发明一种图标拖动分组的导航方法，包括以下步骤，
设备图标拖动，点击需要改变位置或分组的设备图标并拖动。如图1所示，包括两个设备编组，设备编组01和设备编组02。设备编组01和设备编组02中包括多个设备图标1，每个设备图标1中包括设备名、设备IP列表和设备的性能参数。现在需要移动设备编组01中的设备图标，选中需要改变位置或分组的设备图标然后拖动，图中拖动中的设备图标3就是需要改变位置或分组的设备图标。设备图标拖动时，为了保留设备的原始位置以便于将设备放回原始位置，在设备图标的原始位置创建占位符2。
拖动到指定位置，如图2和图3所示，当拖动图标到左右边界时使界面滚动到指定位置来完成更改位置或分组，当拖动图标到上下边界进入缩略视图以便于快速定位到指定位置来完成更改位置或分组。从缩略视图完成排序分组并还原后对拖动设备加上闪烁效果，方便定位到新排序的设备。
新排序位置保存，保存完成更改位置或分组的设备图标的位置信息。
进一步的，如图4所示，设备图标拖动时可以同时选中多个设备图标进行批量更改位置或分组。图中，选中第二行3个设备图标进行批量更改位置或分组，被批量选中的设备图标外框呈黑色，进行批量更改位置或分组时，选中设备图标上标示出设备图标的总数量为3个。
虽然以上描述了本发明的具体实施方式，但是本领域熟练技术人员应当理解，这些仅是举例说明，可以对本实施方式作出多种变更或修改，而不背离发明的原理和实质，本发明的保护范围仅由所附权利要求书限定。
Claims (5)
1.一种图标拖动分组的导航方法，其特征在于，包括以下步骤：
设备图标拖动，点击需要改变位置或分组的设备图标并拖动；
拖动到指定位置，当拖动图标到左右边界时使界面滚动到指定位置来完成更改位置或分组，当拖动图标到上下边界进入缩略视图以便于快速定位到指定位置来完成更改位置或分组；
新排序位置保存，保存完成更改位置或分组的设备图标的位置信息。
2.按照权利要求1所述的一种图标拖动分组的导航方法，其特征在于：设备图标拖动拖动时在设备图标的原始位置创建占位符。
3.按照权利要求1所述的一种图标拖动分组的导航方法，其特征在于：从缩略图完成排序分组并还原后对拖动设备图标加上闪烁效果。
4.按照权利要求1所述的一种图标拖动分组的导航方法，其特征在于：设备图标拖动时可以同时选中多个设备图标进行批量更改位置或分组。
5.按照权利要求4所述的一种图标拖动分组的导航方法，其特征在于：进行批量更改位置或分组时，选中的多个设备图标上标示出设备图标的总数量。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510272291.4A CN104866176A (zh) | 2015-05-26 | 2015-05-26 | 一种图标拖动分组的导航方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510272291.4A CN104866176A (zh) | 2015-05-26 | 2015-05-26 | 一种图标拖动分组的导航方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN104866176A true CN104866176A (zh) | 2015-08-26 |
Family
ID=53912044
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510272291.4A Pending CN104866176A (zh) | 2015-05-26 | 2015-05-26 | 一种图标拖动分组的导航方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104866176A (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105260187A (zh) * | 2015-10-20 | 2016-01-20 | 北京小鸟听听科技有限公司 | 用于可视化拖动建组的方法和终端 |
| CN106775335A (zh) * | 2016-12-01 | 2017-05-31 | 携程计算机技术（上海）有限公司 | 同类图片拖动排序的方法及移动终端 |
| CN115509414A (zh) * | 2022-09-21 | 2022-12-23 | 北京自如信息科技有限公司 | 一种日志分析平台的概览调整方法、装置和电子设备 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101727282A (zh) * | 2009-11-26 | 2010-06-09 | 广东欧珀电子工业有限公司 | 一种交互界面动画的实现方法 |
| CN102298502A (zh) * | 2011-09-26 | 2011-12-28 | 鸿富锦精密工业（深圳）有限公司 | 触摸型电子装置及其图标换页的方法 |
| CN102981704A (zh) * | 2012-11-09 | 2013-03-20 | 广东欧珀移动通信有限公司 | 一种显示界面的图标安置方法及移动终端 |
| CN103324404A (zh) * | 2012-03-20 | 2013-09-25 | 宇龙计算机通信科技(深圳)有限公司 | 图标的移动方法及通信终端 |
| CN103616980A (zh) * | 2013-10-19 | 2014-03-05 | 广东欧珀移动通信有限公司 | 一种快速整理桌面图标的方法及终端 |
| EP2743811A1 (en) * | 2007-12-06 | 2014-06-18 | LG Electronics, Inc. | Terminal and method of controlling the same |
-
2015
- 2015-05-26 CN CN201510272291.4A patent/CN104866176A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP2743811A1 (en) * | 2007-12-06 | 2014-06-18 | LG Electronics, Inc. | Terminal and method of controlling the same |
| CN101727282A (zh) * | 2009-11-26 | 2010-06-09 | 广东欧珀电子工业有限公司 | 一种交互界面动画的实现方法 |
| CN102298502A (zh) * | 2011-09-26 | 2011-12-28 | 鸿富锦精密工业（深圳）有限公司 | 触摸型电子装置及其图标换页的方法 |
| CN103324404A (zh) * | 2012-03-20 | 2013-09-25 | 宇龙计算机通信科技(深圳)有限公司 | 图标的移动方法及通信终端 |
| CN102981704A (zh) * | 2012-11-09 | 2013-03-20 | 广东欧珀移动通信有限公司 | 一种显示界面的图标安置方法及移动终端 |
| CN103616980A (zh) * | 2013-10-19 | 2014-03-05 | 广东欧珀移动通信有限公司 | 一种快速整理桌面图标的方法及终端 |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105260187A (zh) * | 2015-10-20 | 2016-01-20 | 北京小鸟听听科技有限公司 | 用于可视化拖动建组的方法和终端 |
| CN105260187B (zh) * | 2015-10-20 | 2018-10-12 | 北京小鸟听听科技有限公司 | 用于可视化拖动建组的方法和终端 |
| CN106775335A (zh) * | 2016-12-01 | 2017-05-31 | 携程计算机技术（上海）有限公司 | 同类图片拖动排序的方法及移动终端 |
| CN106775335B (zh) * | 2016-12-01 | 2020-02-07 | 携程计算机技术（上海）有限公司 | 同类图片拖动排序的方法及移动终端 |
| CN115509414A (zh) * | 2022-09-21 | 2022-12-23 | 北京自如信息科技有限公司 | 一种日志分析平台的概览调整方法、装置和电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20200057554A1 (en) | Reactive graphical display of real-time values | |
| US9874995B2 (en) | Maintaining context for maximize interactions on grid-based visualizations | |
| KR102455232B1 (ko) | 콘텍스트 기반 탭 관리를 위한 방법 및 전자 장치 | |
| US20140380178A1 (en) | Displaying interactive charts on devices with limited resources | |
| US20120110453A1 (en) | Display of Image Search Results | |
| TWI536248B (zh) | 桌面圖示的分類顯示方法與系統 | |
| US20160248644A1 (en) | Providing visualizations of event sequence data | |
| US8863034B2 (en) | 3D tag clouds for visualizing federated cross-system tags | |
| US20160188166A1 (en) | Method, apparatus, and devices for displaying browser navigation page | |
| CN105630275B (zh) | 桌面显示系统及方法 | |
| CN107765938B (zh) | 一种图片交互方法与装置 | |
| CN102663078B (zh) | 一种用于生成网络社区中的待发布信息的方法与设备 | |
| CN102129453B (zh) | 以图文并茂方式显示搜索结果的显示控制装置及其方法 | |
| CN106156194A (zh) | 一种形成用户操作路径的方法及装置 | |
| CN103019557B (zh) | 页面切换方法和装置 | |
| US20160162597A1 (en) | Intelligent browser-based display tiling | |
| US20160110060A1 (en) | Method and system for sorting desktop objects | |
| CN110309444A (zh) | 一种页面展示方法、装置、介质及服务器 | |
| CN103942246A (zh) | 基于网页url分析归类的浏览器标签显示方法 | |
| CN105468227B (zh) | 一种网页中信息展示方法和装置 | |
| CN104102636A (zh) | 一种页面数据的统计、呈现方法及装置 | |
| Lamberti et al. | VDHM: Viewport-DOM based heat maps as a tool for visually aggregating web users' interaction data from mobile and heterogeneous devices | |
| CN107817935A (zh) | 应用界面的显示方法、装置、终端和计算机可读存储介质 | |
| CN103237135B (zh) | 一种手机十字滑屏操作方法 | |
| US20150178339A1 (en) | Interactive multi-dimensional nested table supporting scalable real-time querying of large data volumes |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| EXSB | Decision made by sipo to initiate substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20150826 |