页面布局方法、装置、设备、可读存储介质和程序产品与流程

专利2026-02-12  16


本技术涉及计算机,特别是涉及一种页面布局方法、装置、设备、可读存储介质和程序产品。


背景技术:

1、随着计算机技术领域的不断发展,为了迎合各用户的多元化需求,出现了个性化页面布局方法。现有的页面布局方法,一般通过监听用户在页面上对页面元素的拖拽操作,来实现页面的个性化设计。

2、然而,采用现有的方式,在用户拖拽目标页面元素导致各元素之间出现元素碰撞的情况下,页面元素重新排布得到的页面布局结果无法保证其他页面元素之间的相对顺序保持不变,降低了用户进行页面布局的便捷性。


技术实现思路

1、基于此,有必要针对上述技术问题,提供一种页面布局方法、装置、设备、可读存储介质和程序产品,能够在页面重新布局的情况下,保证页面布局中各页面元素的相对顺序不变。

2、第一方面,本技术提供了一种页面布局方法,包括:

3、在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下,获取目标页面元素经拖拽后的目标页面位置,以及拖拽操作对应的拖拽方向;

4、根据各其他页面元素对应的初始页面位置,从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素;其中,各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素;

5、根据碰撞页面元素和拖拽方向,对初始页面布局进行重新排布处理,得到新页面布局。

6、在其中一个实施例中,在包括至少两个碰撞页面元素的情况下,根据碰撞页面元素和拖拽方向,对初始页面布局进行重新排布处理,得到新页面布局,包括:

7、获取各碰撞页面元素在初始页面布局中的原始排列序号,以及拖拽前目标页面元素在初始页面布局中的目标排列序号;从各碰撞页面元素的原始排列序号中,确定最小排列序号和最大排列序号;根据最小排列序号、最大排列序号、目标排列序号和拖拽方向,对初始页面布局对应的原始元素排布顺序进行调整,得到新元素排布顺序;根据最小排列序号、目标排列序号、新元素排布顺序和原始排列规则,对初始页面布局进行重新排布处理,得到新页面布局;其中,原始排列规则为生成初始页面布局的排列规则。

8、在其中一个实施例中,根据最小排列序号、最大排列序号、目标排列序号和拖拽方向,对初始页面布局对应的原始元素排布顺序进行调整,得到新元素排布顺序,包括:

9、在拖拽方向为向上拖拽的情况下,将原始元素排布顺序中从最小排列序号至目标排列序号的前一排列序号之间的各排列序号均加一,并将目标排列序号修改为最小排列序号,以得到新元素排布顺序;在拖拽方向为向下拖拽的情况下,将原始元素排布顺序中从目标排列序号的后一排列序号至最小排列序号之间的各排列序号均减一,并将目标排列序号修改为最小排列序号,以得到新元素排布顺序;在拖拽方向为向左拖拽的情况下,将原始元素排布顺序中最大排列序号所对应的碰撞页面元素,与目标页面元素之间的位置交换,以得到新元素排布顺序;在拖拽方向为向右拖拽的情况下,将原始元素排布顺序中最小排列序号所对应的碰撞页面元素,与目标页面元素之间的位置交换,以得到新元素排布顺序。

10、在其中一个实施例中,根据最小排列序号、目标排列序号、新元素排布顺序和原始排列规则,对初始页面布局进行重新排布处理,得到新页面布局,包括:

11、将最小排列序号和目标排列序号中的最小序号值,作为起始重排序列号;将起始重排序列号所对应的页面元素,以及新元素排布顺序中位于起始重排序列号之后的各序列号所对应的页面元素,作为重排页面元素;根据原始排列规则,对初始页面布局中各重排页面元素进行重新排布处理,得到新页面布局。

12、在其中一个实施例中,初始页面布局关联一个文档对象模型dom展示模式和一个canvas图片排布模式,初始页面布局中每一页面元素关联一个文档对象模型dom元素类型和一个canvas图片元素类型;相应的,根据原始排列规则,对初始页面布局中各重排页面元素进行重新排布处理,得到新页面布局,包括:

13、根据原始排列规则,对初始页面布局中canvas图片元素类型的各重排页面元素进行重新排布处理,得到canvas图片排布模式下的canvas页面图片布局;将dom元素类型的各重排页面元素映射至canvas页面图片布局上,得到dom展示模式下的新页面布局。

14、在其中一个实施例中,该方法还包括:

15、在检测到原始页面布局中任一原始页面元素的元素高度增大的情况下,确定原始页面元素对应的初始碰撞元素;根据原始页面元素的高度变化值,对原始页面布局中初始碰撞元素对应的原始页面位置进行修改,并确定初始碰撞元素是否存在对应的其他碰撞元素;若是,则将其他碰撞元素作为新的初始碰撞元素,并返回执行根据原始页面元素的高度变化值,对原始页面布局中初始碰撞元素对应的原始页面位置进行修改的操作,直至初始碰撞元素不存在对应的其他碰撞元素,以得到初始页面布局。

16、第二方面,本技术还提供了一种页面布局装置,包括:

17、获取模块,用于在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下,获取目标页面元素经拖拽后的目标页面位置,以及拖拽操作对应的拖拽方向;

18、碰撞检测模块,用于根据各其他页面元素对应的初始页面位置,从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素;其中,各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素;

19、页面排布模块,用于根据碰撞页面元素和拖拽方向,对初始页面布局进行重新排布处理,得到新页面布局。

20、第三方面,本技术还提供了一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现以下步骤:

21、在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下,获取目标页面元素经拖拽后的目标页面位置,以及拖拽操作对应的拖拽方向;

22、根据各其他页面元素对应的初始页面位置,从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素;其中,各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素;

23、根据碰撞页面元素和拖拽方向,对初始页面布局进行重新排布处理,得到新页面布局。

24、第四方面,本技术还提供了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现以下步骤:

25、在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下,获取目标页面元素经拖拽后的目标页面位置,以及拖拽操作对应的拖拽方向;

26、根据各其他页面元素对应的初始页面位置,从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素;其中,各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素;

27、根据碰撞页面元素和拖拽方向,对初始页面布局进行重新排布处理,得到新页面布局。

28、第五方面,本技术还提供了一种计算机程序产品,包括计算机程序,该计算机程序被处理器执行时实现以下步骤:

29、在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下,获取目标页面元素经拖拽后的目标页面位置,以及拖拽操作对应的拖拽方向;

30、根据各其他页面元素对应的初始页面位置,从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素;其中,各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素;

31、根据碰撞页面元素和拖拽方向,对初始页面布局进行重新排布处理,得到新页面布局。

32、上述页面布局方法、装置、设备、可读存储介质和程序产品,通过在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下,获取目标页面元素经拖拽后的目标页面位置,以及拖拽操作对应的拖拽方向,并根据各其他页面元素对应的初始页面位置,从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素,进而根据碰撞页面元素和拖拽方向,对初始页面布局进行重新排布处理,得到新页面布局。采用上述方法,引入拖拽方向,能够在发生元素碰撞的情况下,基于拖拽方向对初始页面进行重新布局,能够保证新页面布局中各页面元素的相对顺序保持不变,即,在重新布局后无需用户重新调整其他页面之间的相对顺序,提高了用户进行页面布局的便捷性。


技术特征:

1.一种页面布局方法,其特征在于,所述方法包括:

2.根据权利要求1所述的方法,其特征在于,在包括至少两个碰撞页面元素的情况下,所述根据所述碰撞页面元素和所述拖拽方向,对所述初始页面布局进行重新排布处理,得到新页面布局,包括:

3.根据权利要求2所述的方法,其特征在于,所述根据所述最小排列序号、所述最大排列序号、所述目标排列序号和所述拖拽方向,对所述初始页面布局对应的原始元素排布顺序进行调整,得到新元素排布顺序,包括:

4.根据权利要求2所述的方法,其特征在于,所述根据所述最小排列序号、所述目标排列序号、所述新元素排布顺序和原始排列规则,对所述初始页面布局进行重新排布处理,得到新页面布局,包括:

5.根据权利要求4所述的方法,其特征在于,所述初始页面布局关联一个文档对象模型dom展示模式和一个画布canvas图片排布模式,所述初始页面布局中每一页面元素关联一个dom元素类型和一个canvas图片元素类型;

6.根据权利要求1所述的方法,其特征在于,所述方法还包括:

7.一种页面布局装置,其特征在于,所述装置包括:

8.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,其特征在于,所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。

9.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

10.一种计算机程序产品,包括计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。


技术总结
本申请涉及一种页面布局方法、装置、设备、可读存储介质和程序产品。所述方法包括:在检测到对初始页面布局中目标页面元素进行拖拽操作的情况下,获取目标页面元素经拖拽后的目标页面位置,以及拖拽操作对应的拖拽方向,根据各其他页面元素对应的初始页面位置,从各其他页面元素中确定在目标页面位置处与目标页面元素发生碰撞的碰撞页面元素,其中,各其他页面元素包括初始页面布局中除目标页面元素之外的页面元素,根据碰撞页面元素和拖拽方向,对初始页面布局进行重新排布处理,得到新页面布局。采用本方法能够在页面重新布局时保证各页面元素的相对顺序不变,并在数据量较大的情况下,解决拖拽后重绘布局导致的页面卡顿现象,以提升重绘效率。

技术研发人员:秦雪莲,周琳,廖思静,唐宇泽,张子辰
受保护的技术使用者:中国中金财富证券有限公司
技术研发日:
技术公布日:2024/7/25
转载请注明原文地址: https://bbs.8miu.com/read-438347.html

最新回复(0)