页面元素自动布局方法和装置制造方法及图纸

本申请提出一种页面元素自动布局方法和装置，其中，方法包括：在获取到调用鼠标按下事件函数的第一请求时，根据所述第一请求中包含的第一位置，确定目标移动元素；在获取到调用鼠标抬起事件函数的第二请求时，根据所述第二请求中包含的第二位置，修改所述目标移动元素顺序属性值；根据修改后的所述目标移动元素顺序属性值，调整所述目标移动元素的位置。通过本方法，能够实现页面元素的自动布局，简化网页布局操作步骤，提高页面布局的整洁度和美观度，解决现有技术中页面元素布局过程复杂、无法实现自动布局、网页布局混乱的技术问题。

【技术实现步骤摘要】
页面元素自动布局方法和装置
本申请涉及互联网
，尤其涉及一种页面元素自动布局方法和装置。
技术介绍
网页布局是将图片和文字排放在页面的不同位置，对于相同的网页内容，不同用户会有不同的布局设计。网页布局直接影响网页的用户体验。随着网页技术的发展，用户对个性化定制网页的需求越来越强烈。目前，相关技术中，用户对网页内容进行拖拽来改变网页布局时，需要先对选中的内容节点进行标记，再确定待插入的目标节点，计算插入点在目标节点的偏移量，进而按照标记寻找内容节点并将其插入到目标节点内偏移量个字符后。然而，这种拖拽方式需要预先标记拖拽内容以及计算所需的偏移量，操作过程复杂，且无法实现网页元素的自动布局，导致网页布局混乱、美观度差。
技术实现思路
本申请提供一种页面元素自动布局方法和装置，以解决现有技术中页面元素布局过程复杂、无法实现自动布局、网页布局混乱的技术问题。为此，本申请第一方面提出了一种页面元素自动布局方法，以实现页面元素的自动布局，简化网页布局操作步骤，提高页面布局的整洁度和美观度。本申请第二方面提出了一种页面元素自动布局装置。本申请第三方面提出了一种计算机设备。本申请第四方面提出了一种非暂态计算机可读存储介质。本申请第五方面提出了一种计算机程序产品。本申请第一方面实施例提出了一种页面元素自动布局方法，包括：在获取到调用鼠标按下事件函数的第一请求时，根据所述第一请求中包含的第一位置，确定目标移动元素；在获取到调用鼠标抬起事件函数的第二请求时，根据所述第二请求中包含的第二位置，修改所述目标移动元素顺序属性值；根据修改后的所述目标移动元素顺序属性值，调整所述目标移动元素的位置。本申请实施例的页面元素自动布局方法，通过在获取到调用鼠标按下事件函数的第一请求时，根据第一请求中包含的第一位置，确定目标移动元素，并在获取到调用鼠标抬起事件函数的第二请求时，根据第二请求中包含的第二位置，修改目标移动元素顺序属性值，进而根据修改后的目标移动元素顺序属性值，调整目标移动元素的位置。由此，通过根据调用鼠标抬起事件函数的第二请求中包含的第二位置修改目标移动元素顺序属性值，根据修改后的目标移动元素顺序属性值调整目标移动元素的位置，实现了目标移动元素布局位置的自动调整，相较于现有技术，无需标记目标移动元素和计算偏移量，即可调整元素位置，实现了页面元素的自动布局，简化了网页布局操作步骤，提高了页面布局的整洁度和美观度。本申请第二方面实施例提出了一种页面元素自动布局装置，包括：确定模块，用于在获取到调用鼠标按下事件函数的第一请求时，根据所述第一请求中包含的第一位置，确定目标移动元素；修改模块，用于在获取到调用鼠标抬起事件函数的第二请求时，根据所述第二请求中包含的第二位置，修改所述目标移动元素顺序属性值；调整模块，用于根据修改后的所述目标移动元素顺序属性值，调整所述目标移动元素的位置。本申请实施例的页面元素自动布局装置，通过在获取到调用鼠标按下事件函数的第一请求时，根据第一请求中包含的第一位置，确定目标移动元素，并在获取到调用鼠标抬起事件函数的第二请求时，根据第二请求中包含的第二位置，修改目标移动元素顺序属性值，进而根据修改后的目标移动元素顺序属性值，调整目标移动元素的位置。由此，通过根据调用鼠标抬起事件函数的第二请求中包含的第二位置修改目标移动元素顺序属性值，根据修改后的目标移动元素顺序属性值调整目标移动元素的位置，实现了目标移动元素布局位置的自动调整，相较于现有技术，无需标记目标移动元素和计算偏移量，即可调整元素位置，实现了页面元素的自动布局，简化了网页布局操作步骤，提高了页面布局的整洁度和美观度。本申请第三方面实施例提出了一种计算机设备，包括：处理器和存储器；其中，所述处理器通过读取所述存储器中存储的可执行程序代码来运行与所述可执行程序代码对应的程序，以用于实现如第一方面实施例所述的页面元素自动布局方法。本申请第四方面实施例提出了一种非暂态计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面实施例所述的页面元素自动布局方法。本申请第五方面实施例提出了一种计算机程序产品，当所述计算机程序产品中的指令由处理器执行时，执行如第一方面实施例所述的页面元素自动布局方法。本申请附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本申请的实践了解到。附图说明本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：图1为本申请实施例所提供的一种页面元素自动布局方法的流程示意图；图2为本申请实施例所提供的另一种页面元素自动布局方法的流程示意图；图3为本申请实施例所提供的又一种页面元素自动布局方法的流程示意图；图4为本申请实施例所提供的再一种页面元素自动布局方法的流程示意图；图5为本申请实施例所提供的一种页面元素自动布局装置的结构示意图；图6为本申请实施例所提供的另一种页面元素自动布局装置的结构示意图；图7为本申请实施例所提供的又一种页面元素自动布局装置的结构示意图；图8为本申请实施例所提供的再一种页面元素自动布局装置的结构示意图；图9为本申请实施例所提供的一种计算机设备的结构示意图；图10为图示根据本申请实施例的计算机设备的硬件结构示意图；以及图11为图示根据本申请的实施例的计算机可读存储介质的示意图。具体实施方式下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本申请，而不能理解为对本申请的限制。下面参考附图描述本申请实施例的页面元素自动布局方法和装置。图1为本申请实施例所提供的一种页面元素自动布局方法的流程示意图。如图1所示，该页面元素自动布局方法包括以下步骤：步骤101，在获取到调用鼠标按下事件函数的第一请求时，根据第一请求中包含的第一位置，确定目标移动元素。由于不同用户对网页页面内容的需求不同，固定布局的网页页面无法满足用户的个性化需求，用户希望能够根据自己的需求，灵活布局网页页面，以将网页页面布局为自己需要的形式。比如，用户希望能够将常用的组件放置在容易点击到的位置，将不用的组件放置在不经常浏览到的位置。对于已布局好的网页页面，页面中所包含的各元素的位置已确定。当用户想要对页面中的元素进行重新布局，以得到个性化的网页页面时，可以选定需要移动的元素，比如，用户可以将鼠标放置在需要移动的元素上，并按下鼠标来选定该元素。当用户通过鼠标点击网页页面中的某个元素时，会生成调用鼠标按下事件函数onmousedown的第一请求，其中，第一请求中包含鼠标当前所在的第一位置。本实施例中，当获取到调用鼠标按下事件的第一请求时，根据第一请求中包含的第一位置及目前页面中各元素的位置信息，可以确定用户选定的目标移动元素。在本申请实施例一种可能的实现方式中，确定了目标移动元素之后，还可以调整目标移动元素的点击事件属性值，以将目标移动元素从鼠标监听对象中移除。应当理解的是，对于浏览器而言，点击事件pointer-events的属性值有auto和none两个可用，其中，当pointer-events的属性值设置为auto时，鼠标当前选定的元本文档来自技高网...

【技术保护点】
1.一种页面元素自动布局方法，其特征在于，包括：在获取到调用鼠标按下事件函数的第一请求时，根据所述第一请求中包含的第一位置，确定目标移动元素；在获取到调用鼠标抬起事件函数的第二请求时，根据所述第二请求中包含的第二位置，修改所述目标移动元素顺序属性值；根据修改后的所述目标移动元素顺序属性值，调整所述目标移动元素的位置。

【技术特征摘要】
1.一种页面元素自动布局方法，其特征在于，包括：在获取到调用鼠标按下事件函数的第一请求时，根据所述第一请求中包含的第一位置，确定目标移动元素；在获取到调用鼠标抬起事件函数的第二请求时，根据所述第二请求中包含的第二位置，修改所述目标移动元素顺序属性值；根据修改后的所述目标移动元素顺序属性值，调整所述目标移动元素的位置。2.如权利要求1所述的方法，其特征在于，所述确定目标移动元素之后，还包括：调整所述目标移动元素的点击事件属性值，以将所述目标移动元素从鼠标监听对象中移除。3.如权利要求1所述的方法，其特征在于，所述确定目标移动元素之后，还包括：调整所述目标移动元素的位置属性值，以获取所述目标移动元素相对当前页面的定位值；根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改所述目标移动元素的定位值。4.如权利要求1所述的方法，其特征在于，所述确定目标移动元素之后，还包括：根据所述目标移动元素的尺寸属性，修改预设的插入元素的尺寸属性；调整预设的插入元素的显示属性，以使所述预设的插入元素处于可见状态；根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改所述预设的插入元素的顺序属性值。5.如权利要求4所述的方法，其特征在于，所述修改所述目标移动元素顺序属性值，包括：在获取到调用鼠标抬起事件函数的第二请求时，根据所述预设的插入元素的顺序属性值，确定所述目标移动元素的顺序属性值。6.如权利要求5所述的方法，其特征在于，所述调整所述目标移动元素的位置之前，还包括：调整预设的插入元素的显示属性，以使所述预设的插入元素处于隐藏状态。7.如权利要求1-6任一项所述的方法，其特征在于，所述确定所述目标移动元素顺序属性值，包括：根据当前页面中每个容器及每个元素的位置信息，确定所述第二位置对应的目标对象；若所述第二位置对应的目标对象为空容器，则按照第一预设的规则，生成所述目标移...

【专利技术属性】
技术研发人员：俞亮，
申请(专利权)人：天津字节跳动科技有限公司，
类型：发明
国别省市：天津,12