CN114428578B - 一种动态框选页面元素的方法及装置 - Google Patents

Abstract

本申请实施例公开了一种动态框选页面元素的方法及装置，本申请方法包括：将获取到页面上的第一元素保存至第一列表中，所述第一元素由用户在所述页面上的点击操作获取；基于所述第一列表中的第二元素生成第二列表，所述第二元素为所述第一元素中筛选的元素；在接收到所述用户在所述页面的框选指令后查找所述页面上框选的第三元素处于所述第二列表中的位置；根据所述第三元素处于所述第二列表中的位置计算所述第三元素处于所述第一列表中的位置，通过全部查找出选中元素之后统一改变选中状态，在性能上得到进一步改进，有效提高了用户体验感。

Description

一种动态框选页面元素的方法及装置

技术领域

本发明涉及数据处理技术领域，尤其涉及一种动态框选页面元素的方法及装置。

背景技术

用户与电脑端或者小部分移动端网页交互方式很多，用户可以通过鼠标形式或者触摸屏的方式浏览各种页面并进行页面交互操作，其中包括页面元素的选择，当用户需要用到例如复制或者剪切等其他功能时，用户可以直接选中需要的页面元素，目前用户只能一个一个元素点击选中后才能进行下一步的其他功能操作，这样比较单一的页面交互性严重影响用户体验感。

发明内容

本申请实施例提供了一种动态框选页面元素的方法，用于提高用户与页面交互的体验感。

本申请实施例第一方面提供了一种动态框选页面元素的方法，包括：

将获取到页面上的第一元素保存至第一列表中，所述第一元素由用户在所述页面上的点击操作获取；

基于所述第一列表中的第二元素生成第二列表，所述第二元素为所述第一元素中筛选的元素；

在接收到所述用户在所述页面的框选指令后查找所述页面上框选的第三元素处于所述第二列表中的位置；

根据所述第三元素处于所述第二列表中的位置计算所述第三元素处于所述第一列表中的位置。

可选的，所述基于所述第一列表中的第二元素生成第二列表，包括：

标记所述第二元素处于所述第一列表中的第一位置和第二位置；

通过将所述第一位置和所述第二位置进行排列以及统计后输出第二列表。

可选的，所述在接收到所述用户在所述页面的框选指令后查找所述页面上框选的第三元素处于所述第二列表中的位置，包括：

在接收到所述用户在所述页面上的框选指令后通过二分查找法查询所述页面上框选的第三元素处于所述第二列表中的第三位置和第四位置。

可选的，所述根据所述第三元素处于所述第二列表中的位置计算所述第三元素处于所述第一列表中的位置，包括：

对比所述第三位置和所述第四位置的相等以及不相等关系；

根据所述对比的结果确定所述第三元素处于所述第一列表的位置。

可选的，在所述根据所述第三元素处于所述第二列表中的位置计算所述第三元素处于所述第一列表中的位置之后，所述方法还包括：

根据所述第三元素处于所述第一列表中的位置确定所述位置的下标值后显示所述页面上的选中区域。

可选的，所述第一元素包含所述第二元素以及所述第三元素。

本申请实施例第二方面提供了一种动态框选页面元素的装置，包括：

保存单元，用于将获取到页面上的第一元素保存至第一列表中，所述第一元素由用户在所述页面上的点击操作获取；

生成单元，用于基于所述第一列表中的第二元素生成第二列表，所述第二元素为所述第一元素中筛选的元素；

查找单元，用于在接收到所述用户在所述页面的框选指令后查找所述页面上框选的第三元素处于所述第二列表中的位置；

计算单元，用于根据所述第三元素处于所述第二列表中的位置计算所述第三元素处于所述第一列表中的位置。

可选的，所述生成单元包括：

标记模块，用于标记所述第二元素处于所述第一列表中的第一位置和第二位置；

输出模块，用于通过将所述第一位置和所述第二位置进行排列以及统计后输出第二列表。

可选的，所述查找单元包括：

查询模块，用于在接收到所述用户在所述页面上的框选指令后通过二分查找法查询所述页面上框选的第三元素处于所述第二列表中的第三位置和第四位置。

可选的，所述计算单元包括：

对比模块，用于对比所述第三位置和所述第四位置的相等以及不相等关系；

确定模块，用于根据所述对比的结果确定所述第三元素处于所述第一列表的位置。

可选的，在所述计算单元之后，所述装置还包括：

显示单元，用于根据所述第三元素处于所述第一列表中的位置确定所述位置的下标值后显示所述页面上的选中区域。

本申请实施例第三方面提供了一种动态框选页面元素的装置，包括：

处理器、存储器、输入输出单元、总线；

所述处理器与所述存储器、所述输入输出单元以及所述总线相连；

所述处理器具体执行如下操作：

将获取到页面上的第一元素保存至第一列表中，所述第一元素由用户在所述页面上的点击操作获取；

基于所述第一列表中的第二元素生成第二列表，所述第二元素为所述第一元素中筛选的元素；

在接收到所述用户在所述页面的框选指令后查找所述页面上框选的第三元素处于所述第二列表中的位置；

根据所述第三元素处于所述第二列表中的位置计算所述第三元素处于所述第一列表中的位置。

可选的，所述处理器还用于执行第一方面中任意可选方案的操作。

本申请实施例第四方面提供了动态框选页面元素的计算机可读存储介质，包括：

所述计算机可读存储介质上保存有程序，所述程序在计算机上执行前述动态框选页面元素的方法。

以上技术方案可以看出，本申请实施例具有以下优点：本申请中根据用户在页面上的点击操作获取页面上的第一元素保存至第一列表中，筛选第一元素中的第二元素，基于第一列表中的第二元素生成第二列表，在接收到用户在页面的框选指令后查找页面上框选的第三元素处于第二列表中的位置，最后根据第三元素处于第二列表中的位置可以计算第三元素处于第一列表中位置，通过确定第三元素在第一列表中的位置就可以确定第三元素处于页面上的区域，将该区域标记为选中状态。本申请中服务器通过全部查找选中元素之后统一改变选中状态，相对于一对一对比的后再确定选中状态的方法在性能以及效率上有较为明显的改进，使得用户从智能一个一个元素点击选中改进成可以通过拖拽方式选中范围内的元素，有效提高了用户体验感。

附图说明

图1为本申请实施例中动态框选页面元素的方法一个实施例流程示意图；

图2为本申请实施例中动态框选页面元素的方法另一个实施例流程示意图；

图3为本申请实施例中动态框选页面元素的装置一个实施例结构示意图；

图4为本申请实施例中动态框选页面元素的装置另一个实施例结构示意图。

具体实施方式

本申请实施例提供了一种动态框选页面元素的方法，用于提高用户与页面交互的体验感。

本实施例中，动态框选页面元素的方法可在***实现，可在服务器实现，也可在终端实现，具体不做明确限定。

请参阅图1，本申请实施例使用服务器举例描述，本申请实施例中动态框选页面元素的方法一个实施例包括：

101、服务器将获取到页面上的第一元素保存至第一列表中，第一元素由用户在页面上的点击操作获取；

实际应用中，拖动框选页面元素功能目前实现的方法是将用户拖拽过程中形成的选择框位置与页面元素位置进行循环一一对比，例如，首先获得对比的两个矩形左上角的两个点，分别记做p1和p2，分别求出p1和p2在x、y轴上的较大值，两个较大值坐标表示的点记为A点，然后获得两个矩形右下角的两个点分别记做p3和p4，分别求出p3和p4在x、y轴上的较小值，两个较小值坐标表示的点记为B点。最后判断如果A点的x坐标和y坐标分别比B点的x坐标和y坐标值小则两矩形相交，标记为选中状态。但是该方法随着拖动框的变化，每次都会对界面上每个可以被框选的元素进行四次比较，这样对比过程比较繁琐，从而影响服务器执行效率。

本实施例中将一对一对比的方式转换成将所有元素当成一个整体来处理的方式，在全部查找出选中元素之后统一改变选中状态，这样减少了对比次数。首先是在接收到用户在页面上的点击操作后，服务器获取页面上所有可能被选中的矩形元素保存至列表eleList中，此处所有可能被选中的矩形元素为第一元素，列表eleList为第一列表。

102、基于第一列表中的第二元素服务器生成第二列表，第二元素为第一元素中筛选的元素；

本实施例中服务器将所有可能被选中的元素保存至列表eleList中后，取eleList表内所有矩形元素左边框上任意一点的x坐标以及元素右边框上任意一点的x坐标，x表示元素在eleList表中的位置，将所有矩形元素左右边框上元素组成集合后生成sortListX列表。

同理取eleList表内所有矩形元素上边框上任意一点的y坐标以及下边框上任意一点的y坐标，其中y表示元素在eleList表中的位置，将所有矩形元素上下边框上的元素组成集合后生成sortListY列表，本实施例中所有矩形元素左右边框以及上下边框任意一点元素设定为第二元素，sortListX列表和sortListY列表为第二列表。

103、在接收到用户在页面的框选指令后服务器查找页面上框选的第三元素处于第二列表中的位置；

当接收到用户在页面的框选指令后服务器实时查找框选出来的矩形，记做A左边框上任意一点的x坐标值在sortListX列表中的位置，以及矩形A右边框上任意一点的x坐标值在sortListX列表中的位置，此处被框选出来的矩形A可能包含的所有元素为第三元素，同理服务器查找矩形A上边框任意一点和下边框任意一点的y坐标值在sortListY列表中的位置，本实施例中可以根据查找到框选的矩形变化在sortListX列表以及sortListY列表中的位置推算出x以及y坐标轴上包含的元素，进而推算出被框选的矩形包含的元素。

104、服务器根据第三元素处于第二列表中的位置计算第三元素处于第一列表中的位置。

根据步骤103中实时框选的矩形A左边框以及右边框上在sortListX列表中的位置计算在x坐标方向上包含的元素，同理矩形A上边框以及下边框上sortListY列表中的位置计算在y坐标方向上包含的元素，将x以及y方向上包含的元素的下标值组成的数组xList和yList，取xList和yList两个数组的交集得出最终选中元素在eleList表，也就是第一列表的下标值数组，根据下标值数组确定框选的元素区域。经过一次对比就可以直接计算出框选元素范围，减少了对比次数，在性能以及效率上得到改进，尤其在被选中元素很多的情况下该优势更加突出。

请参阅图2，本申请实施例使用服务器举例描述。本申请实施例中动态框选页面元素另一个实施例包括：

201、服务器将获取到页面上的第一元素保存至第一列表中，第一元素由用户在页面上的点击操作获取；

本实施例中的步骤201与前述实施例中的步骤101类似，此处不做赘述。

202、服务器标记第二元素处于第一列表中的第一位置和第二位置；

服务器将所有可能被选中的元素保存至列表eleList中后，取eleList内所有矩形元素左边框上任意一点的x坐标值，标记为Lx，取右边框上任意一点的x坐标，标记为Rx，其中下标x表示元素在eleList表中的位置。同理取eleList表内所有矩形元素上下边框上任意一点的y坐标，分别标记为Tx和Bx，其中下标x表示元素在eleList表中的位置，本实施例中Lx设定为第一位置，Rx设定为第二位置，同理Tx在本实施例中设定为第一位置，Bx设定为第二位置。

203、通过将第一位置和第二位置进行排列以及统计后服务器输出第二列表；

由步骤202得到的第一位置和第二位置，也就是Lx、Tx和Rx、Bx，将所有可能被选中的元素组成一个集合{L1，R1，...,Ln，Rn},其中n为列表eleList的长度，将集合{L1，R1，...,Ln，Rn}按数值大小升序排列保存后，最后输出sortListX列表。

同理，将所有可能被选中的元素组成集合{T1,B1，...,Tn，Bn}，其中n为列表eleList的长度，将集合{T1,B1，...,Tn，Bn}按数值大小升序排列保存后，最后输出sortListY列表，本实施例中将sortListX和sortListY设定为第二列表。

204、在接收到用户在页面上的框选指令后服务器通过二分查找法查询页面上框选的第三元素处于第二列表中的第三位置和第四位置；

在用户拖拽过程中，随着拖拽出来矩形的变化，服务器实时使用二分查找法找出拖拽出来的矩形，记做A。将查找出来A左边框上任意一点的x坐标值在升序列表sortListX中的位置记做x1，以及矩形右边框上任意一点的x坐标值在升序列表sortListX中的位置记做x2,本实施例中被框选出来的矩形A可能包含的所有元素设定为第三元素，x1和x2设定为第三位置和第四位置。

同理得矩形A上边框任意一点和下边框任意一点的y坐标值，在升序列表sortListY中的位置记做y1和y2，同样本实施例中的y1和y2设定为第三位置和第四位置。

205、服务器对比第三位置和第四位置的相等以及不相等关系；

通过步骤204输出的第三位置和第四位置也就是x1、y1和x2、y2，对比x1和x2的相等关系，若x1与x2相等，则从x1位置向后开始遍历sortListX列表到最后一项，找出其中只有Rm没有Lm的元素，其中m为下标值，1<m<n，也可以从x1的位置向前遍历sortListX到列表的第一项，找出只有Lm没有Rm的元素，1<m<n，最后将m值放入数组xList中；若x1和x2不相等，则取出sortListX中从x1位置开始到x2位置的元素，{Lt,Lk,...,Rt,Rk}，其中t、k为下标值，1<t<n，1<k<n；将元素下标值放入数组xList中并去重。

同理对比y1与y2的相等关系，若y1与y2相等，则从y1位置向后开始遍历sortListY列表到最后一项，找出其中只有Bm没有Tm的元素，其中m为下标值，1<m<n，也可以从y1的位置向前遍历sortListY到列表的第一项，找出只有Tm没有Bm的元素，1<m<n，最后将m值放入数组yList中；若y1和y2不相等，则取出sortListY中从y1位置开始到y2位置的元素，{Tt,Tk,...,Bt,Bk}，其中t、k为下标值，1<t<n，1<k<n；将元素下标值放入数组yList中并去重。

206、服务器根据对比的结果确定第三元素处于第一列表的位置。

根据步骤205根据对比x1与x2、y1与y2的对等关系后，取xList与yList两个数组的交集得出最终选中元素在eleList的下标值数组，也就是第三元素处于第一列表中的位置。

207、服务器根据第三元素处于第一列表中的位置确定位置的下标值后显示页面上的选中区域。

本实施例中服务器根据第三元素处于第一列表中的位置就可以确定该位置的下标值后，在页面上快速显示用户拖拽过程中选中的元素区域。

本实施例中将现有的一对一对比的思路转换成了将所有元素当成一个整体处理的思路，现有的技术在对比过程中每次对比之后都会改变元素选中状态，而本实施例是在全部查找出选中元素之后统一改变选中状态。在性能上比较有优势，尤其在被选中元素很多的情况下该优势更加突出，有效提高了用户的体验感。

请参阅图3，本申请实施例中动态框选页面元素的装置一个实施例包括：

保存单元301，用于将获取到页面上的第一元素保存至第一列表中，第一元素由用户在页面上的点击操作获取；

生成单元302，用于基于第一列表中的第二元素生成第二列表，第二元素为第一元素中筛选的元素；

查找单元303，用于在接收到用户在页面的框选指令后查找页面上框选的第三元素处于第二列表中的位置；

计算单元304，用于根据第三元素处于第二列表中的位置计算第三元素处于第一列表中的位置。

显示单元305，用于根据第三元素处于第一列表中的位置确定位置的下标值后显示页面上的选中区域。

本实施例中，生成单元302可以包括标记模块3021和输出模块3022。

标记模块3021，用于标记第二元素处于第一列表中的第一位置和第二位置；

输出模块3022，用于通过将第一位置和第二位置进行排列以及统计后输出第二列表。

本实施例中，查找单元303可以包括查询模块3031。

查询模块3031，用于在接收到用户在页面上的框选指令后通过二分查找法查询页面上框选的第三元素处于第二列表中的第三位置和第四位置。

本实施例中，计算单元304可以包括对比模块3041和确定模块3042。

对比模块3041，用于对比第三位置和第四位置的相等以及不相等关系；

确定模块3042，用于根据对比的结果确定第三元素处于第一列表的位置。

本实施例中，在接收到用户在页面上的点击操作后保存单元301将获取到页面上的第一元素保存至第一列表中，生成单元302中的标记模块3021标记第二元素处于第一列表中的第一位置和第二位置，接着输出模块3022通过将第一位置和第二位置进行排列以及统计后输出第二列表，其中第二元素为第一元素筛选的元素，在接收到用户在页面上的框选指令后查找单元303中的查询模块3031通过二分查找法查询页面上框选的第三元素处于第二列表中的第三位置和第四位置，计算单元304中的对比模块3041对比第三位置和第四位置的相等以及不相等关系，确定模块3042根据对比的结果确定第三元素处于第一列表的位置，最后显示单元305根据第三元素处于第一列表中的位置确定位置的下标值后快速显示页面上的选中区域。通过全部查找出选中元素之后统一改变选中状态在性能上比较有优势，尤其在被选中元素很多的情况下该优势更加突出，有效提高了用户的体验感。

请参阅图4,本申请实施例中动态框选页面元素的装置另一个实施例包括：

处理器401、存储器402、输入输出单元403、总线404；

处理器401与存储器402、输入输出单元403以及总线404相连；

处理器401执行如下操作：

将获取到页面上的第一元素保存至第一列表中，第一元素由用户在页面上的点击操作获取；

基于第一列表中的第二元素生成第二列表，第二元素为第一元素中筛选的元素；

在接收到用户在页面的框选指令后查找页面上框选的第三元素处于第二列表中的位置；

根据第三元素处于第二列表中的位置计算第三元素处于第一列表中的位置。

可选的，处理器401的功能与前述图1至图2所示实施例中的步骤对应，此处不做赘述。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的***，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的***，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个***，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，read-onlymemory)、随机存取存储器(RAM，random access memory)、磁碟或者光盘等各种可以存储程序代码的介质。

Claims (10)

1.一种动态框选页面元素的方法，其特征在于，包括：

将获取到页面上的第一元素保存至第一列表中，所述第一元素由用户在所述页面上的点击操作获取；

基于所述第一列表中的第二元素生成第二列表，所述第二元素为所述第一元素中筛选的元素；

在接收到所述用户在所述页面的框选指令后查找所述页面上框选的第三元素处于所述第二列表中的位置；

根据所述第三元素处于所述第二列表中的位置计算所述第三元素处于所述第一列表中的位置。

2.根据权利要求1所述的方法，其特征在于，所述基于所述第一列表中的第二元素生成第二列表，包括：

标记所述第二元素处于所述第一列表中的第一位置和第二位置；

通过将所述第一位置和所述第二位置进行排列以及统计后输出第二列表。

3.根据权利要求1所述的方法，其特征在于，所述在接收到所述用户在所述页面的框选指令后查找所述页面上框选的第三元素处于所述第二列表中的位置，包括：

在接收到所述用户在所述页面的框选指令后通过二分查找法查询所述页面上框选的第三元素处于所述第二列表中的第三位置和第四位置。

4.根据权利要求3所述的方法，其特征在于，所述根据所述第三元素处于所述第二列表中的位置计算所述第三元素处于所述第一列表中的位置，包括：

对比所述第三位置和所述第四位置的相等以及不相等关系；

根据所述对比的结果确定所述第三元素处于所述第一列表的位置。

5.根据权利要求1所述的方法，其特征在于，在所述根据所述第三元素处于所述第二列表中的位置计算所述第三元素处于所述第一列表中的位置之后，所述方法还包括：

根据所述第三元素处于所述第一列表中的位置确定所述位置的下标值后显示所述页面上的选中区域。

6.根据权利要求1至5中任一项所述的方法，其特征在于，所述第一元素包含所述第二元素以及所述第三元素。

7.一种动态框选页面元素的装置，其特征在于，包括：

保存单元，用于将获取到页面上的第一元素保存至第一列表中，所述第一元素由用户在所述页面上的点击操作获取；

生成单元，用于基于所述第一列表中的第二元素生成第二列表，所述第二元素为所述第一元素中筛选的元素；

查找单元，用于在接收到所述用户在所述页面的框选指令后查找所述页面上框选的第三元素处于所述第二列表中的位置；

计算单元，用于根据所述第三元素处于所述第二列表中的位置计算所述第三元素处于所述第一列表中的位置。

8.根据权利要求7所述的装置，其特征在于，所述生成单元包括：

标记模块，用于标记所述第二元素处于所述第一列表中的第一位置和第二位置；

输出模块，用于通过将所述第一位置和所述第二位置进行排列以及统计后输出第二列表。

9.根据权利要求7所述的装置，其特征在于，所述查找单元包括：

查询模块，用于在接收到所述用户在所述页面上的框选指令后通过二分查找法查询所述页面上框选的第三元素处于所述第二列表中的第三位置和第四位置。

10.根据权利要求9所述的装置，其特征在于，所述计算单元包括：

对比模块，用于对比所述第三位置和所述第四位置的相等以及不相等关系；

确定模块，用于根据所述对比的结果确定所述第三元素处于所述第一列表的位置。