CN110990005B - 网页元素定位方法 - Google Patents

Abstract

本发明公开了一种网页元素定位方法，在本发明的实施例中，基于吸附距离的设定，在拖拽元素被拖拽到距离网页元素一定距离范围内时释放，拖拽元素被自动吸附到设定的亲密性间隔处，不仅大大提高了网页编辑的效率，而且所生成的网页元素间的距离直接由设定值确定，定位的一致性好，且精度已经不是问题，换言之，设定值为多少，就可以达到多少。尤其是，拖拽的灵活性并没有因吸附距离和亲密性间隔的设定而有所影响。

Description

网页元素定位方法

技术领域

本发明涉及一种网页元素定位方法。

背景技术

可视化网页设计/编辑器（也称软件、工具）已经成为当前网页编辑的主流软件，其中，基于拖拽的网页编辑器插件也越来越多的被配置在各类网页编辑器中。拖拽的对象往往是网页编辑器所提供的各类控件，将选定的控件，通过鼠标点击并拖拽至指定的区域释放的方式形成网页元素，操作便捷性比较好。

网页元素在编辑窗口内的定位主要靠鼠标的拖拽定位，网页编辑器通常在编辑窗口侧边处提供标尺或者直接在编辑窗口内创建背景标尺，编辑人员通过经验和辅助标尺对网页元素在编辑窗口内进行定位。该种网页元素的定位方式存在其固有的缺陷：首先网页元素在拖拽过程中网页元素之间的距离无法细化，容易出现定位偏差；此外，拖拽过程中网页元素之间的距离不能在拖拽过程中实时获知。

中国专利文献CN103164191A公开了一种网页元素拖拽方法和装置，该专利文献在其背景技术部分对网页的基本构成和拖拽定位网页元素的原理进行了较为充分的说明，并进一步提出了通过在网页元素拖拽过程中根据网页元素拖拽的目标位置的坐标信息，确定当前网页元素所拖拽到的最上层元素，进而在该最上层元素或该最上层元素的上级节点为容器（用于存放其他网页元素的网页元素）时，将该网页元素移动到相应的容器中。该专利文献借此减少网页元素拖拽过程中的计算量，然而该拖拽过程适于相对粗略的拖拽操作。同时需要说明的是，发明人认为，拖拽过程中的网页元素的与编辑窗口已存的网页元素间的位置关系实质并不需要实时计算，在宏观的层面上需进行位置计算时往往在很小的范围内适用，编辑人员拖拽网页元素的精度不会大于毫米级。尤其是，拖拽网页元素所需要的计算量非常小，对当前计算机的资源占用量非常小，小到可以忽略或者说小到操作人员人眼无法识别的程度，没有必要过分强调单个网页元素拖拽时对资源占用的问题。

中国专利文献CN109213409A公开了一种网页中拖拽组件定位方法，其定位首先确定鼠标拖拽组件的释放时侧层级以及在同级组件中与其它组件的位置关系，然后用以自动调整组别归属和同级别中的位置，该中调整方式相对粗略，适于网页操作，而不适于网页编辑。

中国专利文献CN106445486A公开了一种构造和生成网页的方法及系统，其网页元素的生成也主要通过鼠标拖拽相关控件的方式生成，其对网页元素的定位主要靠鼠标拖拽，在一些实现中采用预先设定位置的方式进行定位。如前所述，简单的依靠鼠标拖拽，其定位精度比较差，而对于预先设定位置，其位置精度比较高，但操作灵活性比较差，尤其是控件图元大小相同，但网页元素大小并不相同，在预先设定位置的条件下，难以对网页元素的属性进行调整。

在一些实现中，编辑界面提供当前网页元素的实时位置信息，以辅助编辑人员进行编辑，这种方式并不能改善手动拖动控件的位置精度控制问题。即便是是鼠标拖拽的位置精度足够高，但在鼠标释放时，总是伴随着可察觉或者不可察觉的手势，而导致释放位置与释放前所确定的位置并不一致。

发明内容

本发明的目的在于提供一种在不影响操作灵活性的条件下具备良好定位精度的网页元素定位方法。

在本发明的实施例中，提供一种网页元素定位方法，应用于网页编辑，对当前的拖拽控件进行赋值，所赋值包括亲密性间隔和吸附距离；

拖拽控件进入编辑页面形成拖拽元素；

拖拽元素被拖拽至编辑页面内已存的网页元素给定距离范围内释放，拖拽元素被定位至距离所述网页元素亲密性间隔处而形成新的网页元素；

若在给定距离范围外释放，则拖拽元素停靠在释放位置而形成新的网页元素；

其中，给定距离范围为[J-X,J+X]；J为亲密性间隔，X为吸附距离。

根据权利要求1所述的网页元素定位方法，其特征在于，所述亲密性间隔和吸附距离包括全局变量和局部变量，且局部变量优先级高于全局变量；

其中，全局变量用于对全局的亲密性间隔和吸附距离进行设定；

局部变量用于对当前的拖拽控件进行设定。

上述网页元素定位方法，可选地，全局变量为默认变量，且可修改，修改后的全局变量在下次修改前保持不变。

可选地，直接父元素所设定或所承继的变量构成该直接父元素所涵盖直接子元素的子全局变量；

若当前的拖拽元素使用默认的全局变量，当前的拖拽元素被拖入到直接父元素内时，全局变量变更为子全局变量，并在当前的拖拽元素被拖出直接父元素内时，子全局变量变更为全局变量；

若当前的拖拽元素使用设定的局部变量，则该局部变量的优先级高于子全局变量。

可选地，子元素从属于直接父元素的拖拽。

可选地，控件赋值在鼠标选定该控件时进行；或

针对选定的控件进行当前手动赋值。

可选地，全局变量还包括一个显示距离，该显示距离为实时显示拖拽元素与网页元素间距离的阈值；

当拖拽元素与网页元素间的距离小于等于显示距离时，实时显示拖拽元素与网页元素间的距离。

可选地，显示距离为亲密性间隔的3~5倍。

可选地，当拖拽元素与网页元素间的显示距离有多个时，实时距离显示的距离数据呈现在拖拽所对冲的网页元素上，并与距离所对应的网页元素的边侧相对应。

可选地，亲密性间隔为0~30px，吸附距离为5~15px。

在本发明的实施例中，基于吸附距离的设定，在拖拽元素被拖拽到距离网页元素一定距离范围内时释放，拖拽元素被自动吸附到设定的亲密性间隔处，不仅大大提高了网页编辑的效率，而且所生成的网页元素间的距离直接由设定值确定，定位的一致性好，且精度已经不是问题，换言之，设定值为多少，就可以达到多少。尤其是，拖拽的灵活性并没有因吸附距离和亲密性间隔的设定而有所影响。

附图说明

图1为一实施例中拖拽元素与网页元素间右对齐过程示意图，图中，斜尖头表示鼠标；实线框表示网页中原有的元素，记为网页元素；记为拖拽元素；点虚线框为拖拽过程中的元素，记为拖拽元素；短线虚线框表示被拖拽的元素的目标位置；下同。

图2为一实施例中拖拽元素与网页元素上对齐过程示意图。

图3为一实施例中拖拽元素与网页元素左对齐过程示意图。

图4为一实施例中拖拽元素与网页元素下对其过程示意图。

图5为一实施例中拖拽元素与网页元素定位方法流程图。

具体实施方式

可以理解的是，网页编辑页面是一个二维空间，在拖拽元素拖拽过程中可进行一维的定位，也可以同时进行二维的定位，图1~4示出了一维的定位方式，二维定位方式实际相同。

可以理解的是，基于拖拽进行网页编辑的方法，其原理大致相同，都是系统侦听鼠标指针，触发设定的事件，响应该事件的处理过程，对于这些基本操作在本发明的实施例中不再赘述。

对于吸附，其基本算法是，当拖动元素意欲定位的一侧落入目标位置一定距离范围内时，鼠标释放拖拽元素，拖拽元素意欲定位一侧的位置等于目标位置，相当于“约等于”，从而消除定位的精度问题。其中，目标位置是拖拽元素与网页元素之间的期望距离，在本发明的实施例中定位为亲密性间隔。而前述的拖动元素意欲定位的一侧落入目标位置一定距离范围内，是以所述亲密性间隔为中心的邻域U（J），此处的J即所述亲密性间隔，以相对距离作为参考系。在以下的实施例中，还可以采用绝对坐标进行计算的方式进行处理。进而，邻域半径X用于确定所述的“一定距离范围”的大小，按照邻域的定义，该一定距离范围由点J的X邻域来确定。邻域半径X记为吸附距离。

在本发明的实施例中，使用两个值辅助拖拽元素的定位，即前述的亲密性间隔J和吸附距离X。可以理解的是，可视化网页编辑器，其往往会提供一定量的控件，编辑人员可以通过拖拽控件的方式进行可视化的网页编辑。在本发明的实施例中，处于编辑菜单中的对象称为控件，为鼠标所拖拽中的对象称为拖拽元素，鼠标释放后形成所编辑页面的组成部分，称为网页元素。

对于亲密性间隔J和吸附距离X在本发明的实施例中主要采用两种方式来确定，其一为默认值，其二为手动设定值，其中手动设定值的优先级高于默认值。

此外，对于亲密性间隔J和吸附距离X还可以区分为全局变量和局部变量，以方便网页的编辑。

在设定亲密性间隔J和吸附距离X时，可以考虑以下因素：

1）网页元素之间应该有间隔，以保证网页元素之间能够被用户理解为网页元素之间存在特定的关系。

2）网页设计师设计一个合理的间隔（非零间隔）作为网页元素之间的亲密性间隔J，随亲密关系的变远，元素间距可按亲密性间隔J成倍增大。

3）网页编辑人员可在网页编辑器中设置亲密性间隔J，同时设置吸附距离X。这两个值可以有默认值和推荐值，并且基于编辑人员的喜好，可以进行默认值的预先设定，以及针对当前的拖拽元素的独立设定。

对于亲密性间隔J和吸附距离X，在存在全局变量和/或局部变量（又叫内部变量）的条件下，可自动使用例如全局变量对亲密性间隔J和吸附距离X进行赋值，也可以针对当前的拖拽元素进行人工赋值。

4）一般情况下，基于拖拽进行网页编辑的过程中，在编辑人员拖拽元素的过程中，网页元素（整体上称为网页元素）按照1单位（px，即Pixel，像素）距离移动。

基于以上构思，在以下的实施例中，网页编辑器帮助用户快速移动拖拽元素位置到与网页元素之间的亲密性间隔J的位置：

a.图1为拖拽元素向网页元素右侧移动的流程，具体是拖拽元素和编辑器编辑页面中的某个网页元素（网页元素）在水平方向的一种对齐方式，即图1中的与网页元素的右侧对齐。拖拽元素的当前位置，其左边界（以坐标左小右大的绝对坐标系为参考系）在水平方向上大于或大于等于网页元素右边界+亲密性间隔-吸附距离且小于或小于等于网页元素的右边界+亲密性间隔+吸附距离时，释放鼠标，拖拽元素在水平方向上吸附到网页元素右边界+亲密性间隔处。

对于亲密性间隔J，可以统一设置一个全局变量，在局部，还可以通过设置倍数该全局变量的方式设置局部的亲密性间隔J，即J*N，其中N取值范围是从0到2。下同。

b.图3为拖拽元素和编辑器中的网页元素的左侧对齐的示例，图中，拖拽元素的右边界在水平方向上大于或者大于等于网页元素左边界-亲密性间隔*N-吸附距离且小于网页元素的左边界-亲密性间隔*N+吸附距离时，释放鼠标，拖拽元素吸附到网页元素左边界-亲密性间隔*N处。

此处的N还可以理解为在全局或者不同的局部对亲密性间隔要求不同的情况。

c.图4示出了拖拽元素和编辑器中的网页元素在垂直方向对齐的一种情况，即拖拽元素上边界与网页元素下边界（以上大下小的绝对坐标系为参考系）对齐的情况。拖拽元素上边界在垂直方向上大于或大于等于网页元素下边界+亲密性间隔*N-吸附距离且小于或小于等于网页元素的下边界+亲密性间隔*N+吸附距离时，释放鼠标后，拖拽元素在垂直方向上吸附到网页元素下边界+亲密性间隔*N处，其中N取值范围是从0到2，N用于表示在全局或者局部不同的亲密性间隔示例。

d.图2示出了拖拽元素和编辑器中的网页元素在垂直方向对齐的另一种情况，即拖拽元素下边界与网页元素上边界对其的情形，拖拽元素下边界在垂直方向上大于网页元素上边界+亲密性间隔*N-吸附距离且小于网页元素的上边界+亲密性间隔*N+吸附距离时，释放鼠标，拖拽元素吸附到网页元素上边界+亲密性间隔*N处，其中N取值范围是从0到2。

e.拖拽元素上边界在垂直方向上大于或大于等于其直接父元素（一种网页元素，拖拽元素包含于直接父元素）上边界+亲密性间隔*N-吸附距离且小于直接父元素的上边界+亲密性间隔*N+吸附距离时，释放鼠标，拖拽元素在垂直方向上吸附到直接父元素上边界+亲密性间隔*N处，其中N取值范围是从0到2。

f.拖拽元素下边界在垂直方向上小于其直接父元素下边界-亲密性间隔*N+吸附距离且大于直接父元素的下边界-亲密性间隔*N时-吸附距离，释放鼠标，拖拽元素在垂直方向上吸附到直接父元素下边界-亲密性间隔*N处，其中N取值范围是从0到2。

g.拖拽元素左边界在水平方向上大于其直接父元素左边界+亲密性间隔*N-吸附距离，且小于直接父元素的左边界+亲密性间隔*N+吸附距离时，释放鼠标，释放鼠标，拖拽元素吸附到直接父元素左边界+亲密性间隔*N处，其中N取值范围是从0到2。

h.拖拽元素右边界在水平方向上小于其直接父元素右边界-亲密性间隔*N+吸附距离，且大于直接父元素的右边界-亲密性间隔*N-吸附距离时，释放鼠标，拖拽元素吸附到直接父元素右边界-亲密性间隔*N处，其中N取值范围是从0到2。

i.拖拽元素在水平方向或垂直方向上有多个网页元素时，在同方向上优先移动到绝对值最小的位置。

在以下情况提示网页编辑人员网页元素之间的距离，辅助用户判断元素之间的亲密性是否合理：

A.拖拽元素上边界在垂直方向上大于编辑器编辑页面已存的某个元素（即网页元素）下边界且小于网页元素的下边界+亲密性间隔*5时，沿拖拽元素的上边界展示一条虚线，沿网页元素下边界展示一条虚线，以拖拽元素的左上角为起点，展示一条垂直拖拽元素上边界的线，以示意距离，记为距离示意线，在距离示意线的右侧展示拖拽元素与网页元素间在垂直方向的距离。

B.拖拽元素下边界在垂直方向上小于编辑器某个元素（即网页元素）上边界且大于网页元素的上边界-亲密性间隔*5时，沿拖拽元素的下边界展示一条虚线，沿网页元素上边界展示一条虚线，以拖拽元素的左下角为起点，展示一条垂直拖拽元素下边界的线，即距离示意线，在距离示意线的左侧展示拖拽元素与网页元素间在垂直方向的距离

C.拖拽元素左边界在水平方向上大于编辑器编辑界面某个元素（即网页元素）右边界且小于网页元素的右边界+亲密性间隔*5时，沿拖拽元素的左边界展示一条虚线，沿网页元素右边界展示一条虚线，以为拖拽元素的左上角为起点，展示一条垂直拖拽元素左边界的线，即距离示意线，在距离示意线的下侧展示拖拽元素与网页元素在水平方向的距离

D.拖拽元素右边界在水平方向上小于编辑器编辑界面内某个元素（即网页元素）左边界且大于网页元素的左边界-亲密性间隔*5时，沿拖拽元素的右边界展示一条虚线，沿网页元素左边界展示一条虚线，以拖拽元素的右上角为起点，展示一条垂直拖拽元素左边界的线，即距离示意线，在距离示意线的上侧展示拖拽元素与网页元素间在水平方向的距离。

E.编辑器中的网页元素在与拖拽元素为同一父元素的直接子元素才可以记为亲密元素，该亲密元素够成为A~D中的网页元素。下同。

F.拖拽元素上边界在垂直方向上大于其直接父元素（亲密元素）上边界且小于直接父元素的上边界+亲密性间隔*5时，沿拖拽元素的上边界展示一条虚线，以为拖拽元素的左上角为起点，展示一条垂直拖拽元素上边界的线（距离示意线），在距离示意线的右侧展示拖拽元素与亲密元素在垂直方向的距离。

G.拖拽元素下边界在垂直方向上小于其直接父元素（亲密元素）下边界且大于直接父元素的下边界-亲密性间隔*5时，沿拖拽元素的下边界展示一条虚线，以为拖拽元素的左下角为起点，展示一条垂直拖拽元素下边界的线（距离示意线），在距离示意线的右侧展示拖拽元素与直接父元素间在垂直方向的距离。

H.拖拽元素左边界在水平方向上大于其直接父元素（亲密元素）左边界且小于直接父元素的左边界+亲密性间隔*5时，沿拖拽元素的左边界展示一条虚线，以为拖拽元素的左上角为起点，展示一条垂直拖拽元素左边界的线（距离示意线），在距离示意线的下侧展示拖拽元素与直接父元素间在水平方向的距离。

I.拖拽元素右边界在水平方向上小于其直接父元素（亲密元素）右边界且大于直接父元素的右边界-亲密性间隔*5时，沿拖拽元素的右边界展示一条虚线，以拖拽元素的右上角为起点，展示一条垂直拖拽元素右边界的线（距离示意线），在距离示意线的下侧展示拖拽元素与直接父元素间在水平方向的距离。

j.拖拽元素在水平方向或垂直方向上有多个亲密元素时，在同方向上优先显示绝对值最小的距离。

编辑器中可以预先设置亲密性间隔和吸附距离，该预先设置的亲密性间隔和吸附距离为全局变量。

在具体的网页元素编辑时，可能需要对某一个网页元素进行设置，包含在该网页元素下的子网页元素受该网页元素的约束，所设置的亲密性间隔和吸附距离构成局部变量。

无论是全局变量还是局部变量都可以设置。

直接父元素所设定或所承继的变量构成该直接父元素所涵盖直接子元素的子全局变量；

若当前的拖拽元素使用默认的全局变量，当前的拖拽元素被拖入到直接父元素内时，全局变量变更为子全局变量，并在当前的拖拽元素被拖出直接父元素内时，子全局变量变更为全局变量；

若当前的拖拽元素使用设定的局部变量，则该局部变量的优先级高于子全局变量。

在网页编辑过程中，对父元素进行拖拽时，包含在该父元素下的子元素随动于该父元素的拖拽。

为了方便编辑，在基于拖拽进行网页编辑时，提供拖拽元素与网页元素间的距离。但可以理解的是，这种方式在网页元素较多时，会存在各种干扰，并且会增大整体的计算量，为此，当拖拽元素与网页元素间的距离小于等于显示距离时，实时显示拖拽元素与网页元素间的距离。即设定一个阈值，在拖拽元素与既存的网页元素间距离较小时才显示拖拽元素与既存的网页元素间的实时距离，该实时距离记为显示距离。

在优选的实施例中，实时距离为亲密性间隔的3~5倍，相应地，亲密性间隔在不同的域中会有不同的值，显然实时距离与此相应，如在全局，则适配于全局的亲密性间隔，若在局部，在适配于局部的亲密性间隔。

图5示出了一种拖拽方式进行网页定位的方法流程图，图中亲密性间隔为10px，吸附距离为6px。

Claims (8)

1.一种网页元素定位方法，应用于网页编辑，其特征在于，对当前的拖拽控件进行赋值，所赋值包括亲密性间隔和吸附距离；

拖拽控件进入编辑页面形成拖拽元素；

拖拽元素被拖拽至编辑页面内已存的网页元素给定距离范围内释放，拖拽元素被定位至距离所述网页元素亲密性间隔处而形成新的网页元素；

若在给定距离范围外释放，则拖拽元素停靠在释放位置而形成新的网页元素；

其中，给定距离范围为[J-X,J+X]；J为亲密性间隔，X为吸附距离；

所述亲密性间隔和吸附距离包括全局变量和局部变量，且局部变量优先级高于全局变量；

其中，全局变量用于对全局的亲密性间隔和吸附距离进行设定；

局部变量用于对当前的拖拽控件进行设定；

直接父元素所设定或所承继的变量构成该直接父元素所涵盖直接子元素的子全局变量；

若当前的拖拽元素使用默认的全局变量，当前的拖拽元素被拖入到直接父元素内时，全局变量变更为子全局变量，并在当前的拖拽元素被拖出直接父元素内时，子全局变量变更为全局变量；

若当前的拖拽元素使用设定的局部变量，则该局部变量的优先级高于子全局变量。

2.根据权利要求1所述的网页元素定位方法，其特征在于，全局变量为默认变量，且可修改，修改后的全局变量在下次修改前保持不变。

3.根据权利要求1所述的网页元素定位方法，其特征在于，子元素从属于直接父元素的拖拽。

4.根据权利要求1所述的网页元素定位方法，其特征在于，控件赋值在鼠标选定该控件时进行；或

针对选定的控件进行当前手动赋值。

5.根据权利要求1所述的网页元素定位方法，其特征在于，全局变量还包括一个显示距离，该显示距离为实时显示拖拽元素与网页元素间距离的阈值；

当拖拽元素与网页元素间的距离小于等于显示距离时，实时显示拖拽元素与网页元素间的距离。

6.根据权利要求5所述的网页元素定位方法，其特征在于，显示距离为亲密性间隔的3~5倍。

7.根据权利要求5所述的网页元素定位方法，其特征在于，当拖拽元素与网页元素间的显示距离有多个时，实时距离显示的距离数据呈现在拖拽所对应的网页元素上，并与距离所对应的网页元素的边侧相对应。

8.根据权利要求1所述的网页元素定位方法，其特征在于，亲密性间隔为0~30px，吸附距离为5~15px。

Images