[发明专利]一种图标拖动分组的导航方法

说明书

技术领域

本发明涉及基于网页的图标展示技术领域，特别是一种图标拖动分组的导航方法。

背景技术

随着互联网的飞速发展，浏览器不再仅仅用来表示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。