CN109271075A - 页面元素自动布局方法和装置 - Google Patents

Abstract

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

Description

页面元素自动布局方法和装置

技术领域

本申请涉及互联网技术领域，尤其涉及一种页面元素自动布局方法和装置。

背景技术

网页布局是将图片和文字排放在页面的不同位置，对于相同的网页内容，不同用户会有不同的布局设计。网页布局直接影响网页的用户体验。

随着网页技术的发展，用户对个性化定制网页的需求越来越强烈。目前，相关技术中，用户对网页内容进行拖拽来改变网页布局时，需要先对选中的内容节点进行标记，再确定待插入的目标节点，计算插入点在目标节点的偏移量，进而按照标记寻找内容节点并将其插入到目标节点内偏移量个字符后。然而，这种拖拽方式需要预先标记拖拽内容以及计算所需的偏移量，操作过程复杂，且无法实现网页元素的自动布局，导致网页布局混乱、美观度差。

发明内容

本申请提供一种页面元素自动布局方法和装置，以解决现有技术中页面元素布局过程复杂、无法实现自动布局、网页布局混乱的技术问题。

为此，本申请第一方面提出了一种页面元素自动布局方法，以实现页面元素的自动布局，简化网页布局操作步骤，提高页面布局的整洁度和美观度。

本申请第二方面提出了一种页面元素自动布局装置。

本申请第三方面提出了一种计算机设备。

本申请第四方面提出了一种非暂态计算机可读存储介质。

本申请第五方面提出了一种计算机程序产品。

本申请第一方面实施例提出了一种页面元素自动布局方法，包括：

在获取到调用鼠标按下事件函数的第一请求时，根据所述第一请求中包含的第一位置，确定目标移动元素；

在获取到调用鼠标抬起事件函数的第二请求时，根据所述第二请求中包含的第二位置，修改所述目标移动元素顺序属性值；

根据修改后的所述目标移动元素顺序属性值，调整所述目标移动元素的位置。

本申请实施例的页面元素自动布局方法，通过在获取到调用鼠标按下事件函数的第一请求时，根据第一请求中包含的第一位置，确定目标移动元素，并在获取到调用鼠标抬起事件函数的第二请求时，根据第二请求中包含的第二位置，修改目标移动元素顺序属性值，进而根据修改后的目标移动元素顺序属性值，调整目标移动元素的位置。由此，通过根据调用鼠标抬起事件函数的第二请求中包含的第二位置修改目标移动元素顺序属性值，根据修改后的目标移动元素顺序属性值调整目标移动元素的位置，实现了目标移动元素布局位置的自动调整，相较于现有技术，无需标记目标移动元素和计算偏移量，即可调整元素位置，实现了页面元素的自动布局，简化了网页布局操作步骤，提高了页面布局的整洁度和美观度。

本申请第二方面实施例提出了一种页面元素自动布局装置，包括：

确定模块，用于在获取到调用鼠标按下事件函数的第一请求时，根据所述第一请求中包含的第一位置，确定目标移动元素；

修改模块，用于在获取到调用鼠标抬起事件函数的第二请求时，根据所述第二请求中包含的第二位置，修改所述目标移动元素顺序属性值；

调整模块，用于根据修改后的所述目标移动元素顺序属性值，调整所述目标移动元素的位置。

本申请实施例的页面元素自动布局装置，通过在获取到调用鼠标按下事件函数的第一请求时，根据第一请求中包含的第一位置，确定目标移动元素，并在获取到调用鼠标抬起事件函数的第二请求时，根据第二请求中包含的第二位置，修改目标移动元素顺序属性值，进而根据修改后的目标移动元素顺序属性值，调整目标移动元素的位置。由此，通过根据调用鼠标抬起事件函数的第二请求中包含的第二位置修改目标移动元素顺序属性值，根据修改后的目标移动元素顺序属性值调整目标移动元素的位置，实现了目标移动元素布局位置的自动调整，相较于现有技术，无需标记目标移动元素和计算偏移量，即可调整元素位置，实现了页面元素的自动布局，简化了网页布局操作步骤，提高了页面布局的整洁度和美观度。

本申请第三方面实施例提出了一种计算机设备，包括：处理器和存储器；其中，所述处理器通过读取所述存储器中存储的可执行程序代码来运行与所述可执行程序代码对应的程序，以用于实现如第一方面实施例所述的页面元素自动布局方法。

本申请第四方面实施例提出了一种非暂态计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面实施例所述的页面元素自动布局方法。

本申请第五方面实施例提出了一种计算机程序产品，当所述计算机程序产品中的指令由处理器执行时，执行如第一方面实施例所述的页面元素自动布局方法。

本申请附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本申请的实践了解到。

附图说明

本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：

图1为本申请实施例所提供的一种页面元素自动布局方法的流程示意图；

图2为本申请实施例所提供的另一种页面元素自动布局方法的流程示意图；

图3为本申请实施例所提供的又一种页面元素自动布局方法的流程示意图；

图4为本申请实施例所提供的再一种页面元素自动布局方法的流程示意图；

图5为本申请实施例所提供的一种页面元素自动布局装置的结构示意图；

图6为本申请实施例所提供的另一种页面元素自动布局装置的结构示意图；

图7为本申请实施例所提供的又一种页面元素自动布局装置的结构示意图；

图8为本申请实施例所提供的再一种页面元素自动布局装置的结构示意图；

图9为本申请实施例所提供的一种计算机设备的结构示意图；

图10为图示根据本申请实施例的计算机设备的硬件结构示意图；以及

图11为图示根据本申请的实施例的计算机可读存储介质的示意图。

具体实施方式

下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本申请，而不能理解为对本申请的限制。

下面参考附图描述本申请实施例的页面元素自动布局方法和装置。

图1为本申请实施例所提供的一种页面元素自动布局方法的流程示意图。

如图1所示，该页面元素自动布局方法包括以下步骤：

步骤101，在获取到调用鼠标按下事件函数的第一请求时，根据第一请求中包含的第一位置，确定目标移动元素。

由于不同用户对网页页面内容的需求不同，固定布局的网页页面无法满足用户的个性化需求，用户希望能够根据自己的需求，灵活布局网页页面，以将网页页面布局为自己需要的形式。比如，用户希望能够将常用的组件放置在容易点击到的位置，将不用的组件放置在不经常浏览到的位置。

对于已布局好的网页页面，页面中所包含的各元素的位置已确定。当用户想要对页面中的元素进行重新布局，以得到个性化的网页页面时，可以选定需要移动的元素，比如，用户可以将鼠标放置在需要移动的元素上，并按下鼠标来选定该元素。当用户通过鼠标点击网页页面中的某个元素时，会生成调用鼠标按下事件函数onmousedown的第一请求，其中，第一请求中包含鼠标当前所在的第一位置。本实施例中，当获取到调用鼠标按下事件的第一请求时，根据第一请求中包含的第一位置及目前页面中各元素的位置信息，可以确定用户选定的目标移动元素。

在本申请实施例一种可能的实现方式中，确定了目标移动元素之后，还可以调整目标移动元素的点击事件属性值，以将目标移动元素从鼠标监听对象中移除。应当理解的是，对于浏览器而言，点击事件pointer-events的属性值有auto和none两个可用，其中，当pointer-events的属性值设置为auto时，鼠标当前选定的元素是鼠标事件的目标对象，当pointer-events的属性值设置为none时，鼠标当前选定的元素不再是鼠标事件的目标对象，鼠标不再监听当前选定的元素。从而，本实施例中，确定了目标移动元素之后，可以将pointer-events的属性值设置为none，使得鼠标不再监听目标移动元素，从而可以利用鼠标对其他元素进行操作。

步骤102，在获取到调用鼠标抬起事件函数的第二请求时，根据第二请求中包含的第二位置，修改目标移动元素顺序属性值。

本实施例中，用户选定目标移动元素之后，可以拖动鼠标以使目标移动元素移动，将目标移动元素拖拽至希望放置的位置后，用户可以松开鼠标，生成调用鼠标抬起事件函数onmouseup的第二请求，其中，第二请求中包含鼠标当前所在的第二位置。当获取到调用鼠标抬起事件函数的第二请求时，可以根据第二请求中包含的第二位置，修改目标移动元素顺序属性值。

弹性布局和网格布局是网页页面布局中常用的两种布局方式。弹性布局用来为盒状模型提供最大的灵活性，网页页面中的任何一个容器都可以指定为弹性布局。网格布局用于将页面分割成数个主要区域，或者用来定义组件内部元素间大小、位置和图层之间的关系。本实施例中，可以预先为每个容器内的元素设置顺序(order)属性值，order属性规定了弹性容器中的可伸缩项目在布局时的顺序，元素按照order属性的属性值的增序进行布局，拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局。order属性在网格布局、弹性布局中均适用。从而，获取到调用鼠标抬起事件函数的第二请求后，可以根据第二请求中的第二位置，修改目标移动元素顺序属性值。

举例而言，假设第二请求中包含的第二位置的坐标值为(x1，y1)，该坐标值对应的元素的顺序属性值为2，则可以将目标移动元素顺序属性值修改为2。进一步地，如果第二位置处已放置有其他元素，则可以将其他元素的顺序属性值递增，比如，将其他元素的顺序属性值设置为3。

步骤103，根据修改后的目标移动元素顺序属性值，调整目标移动元素的位置。

本实施例中，确定了目标移动元素顺序属性值之后，即可根据修改后的目标移动元素顺序属性值，调整目标移动元素的位置，将目标移动元素从第一位置移动至第二位置处，实现了页面元素的自动布局。

本实施例的页面元素自动布局方法，通过在获取到调用鼠标按下事件函数的第一请求时，根据第一请求中包含的第一位置，确定目标移动元素，并在获取到调用鼠标抬起事件函数的第二请求时，根据第二请求中包含的第二位置，修改目标移动元素顺序属性值，进而根据修改后的目标移动元素顺序属性值，调整目标移动元素的位置。由此，通过根据调用鼠标抬起事件函数的第二请求中包含的第二位置修改目标移动元素顺序属性值，根据修改后的目标移动元素顺序属性值调整目标移动元素的位置，实现了目标移动元素布局位置的自动调整，相较于现有技术，无需标记目标移动元素和计算偏移量，即可调整元素位置，实现了页面元素的自动布局，简化了网页布局操作步骤，提高了页面布局的整洁度和美观度。

相关技术中，对网页元素进行拖拽时，通常是直接将待移动的元素插入至目标位置，用户无法感知网页元素的拖拽过程，用户对元素移动过程的理解难度大，交互体验感差。针对这一问题，本申请还提出了另一种页面元素自动布局方法，图2为本申请实施例所提供的另一种页面元素自动布局方法的流程示意图。

如图2所示，在如图1所示实施例的基础上，步骤101之后还可以包括以下步骤：

步骤201，调整目标移动元素的位置属性值，以获取目标移动元素相对当前页面的定位值。

在网页页面布局技术中，位置属性(position)是一个非常常见也十分重要的属性，其默认的属性值为静态定位(static)，当position的属性值设置为static时，网页页面中的元素按照浏览器对网页中元素的排列规则排列；当position的属性值设置为固定定位(fixed)时，则元素是相对浏览器窗口为基准进行定位的，此时，top、bottom、left和right的值也是元素的各边界相对于浏览器窗口的距离。

本实施例中，确定了目标移动元素后，可以调整目标移动元素的位置属性值，将目标移动元素的位置属性值设置为fixed，以获取目标移动元素相对当前页面的定位值，即获取目标移动元素相对于浏览器窗口的定位值。具体地，将目标移动元素的位置属性值设置为fixed，以将目标移动元素相对于父元素的左、右、上、下边距的定位，调整为目标移动元素相对于浏览器窗口的左、右、上、下边距的定位。

步骤202，根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改目标移动元素的定位值。

能够理解的是，在拖动鼠标移动时，会调用鼠标移动事件函数onmousemove。用户通过鼠标选定目标移动对象后，若拖动鼠标继续移动，则会生成一个调用鼠标移动事件函数的第三请求，其中，第三请求中包含鼠标当前的位置信息，该位置信息是鼠标相对于浏览器窗口参考位置的坐标，比如相对浏览器窗口左上角的坐标值。本实施例中，获取到第三请求后，可以根据第三请求中包含的位置信息，修改目标移动元素的定位值，以使目标移动元素的定位与鼠标的位置一致，从而使目标移动元素跟随鼠标移动。

举例而言，假设浏览器窗口左上角的坐标为(0,0)，第三请求中包含的位置信息为(10,10)，则根据第三请求中的位置信息，将目标移动元素的top值设置为10，将目标移动元素的left值设置为10，使目标移动元素随鼠标的移动而移动。

本实施例的页面元素自动布局方法，通过调整目标移动元素的位置属性值，以获取目标移动元素相对当前页面的定位值，根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改目标移动元素的定位值，由此，实现了目标移动元素跟随鼠标移动，使用户感知目标移动元素的移动过程，降低用户对元素移动过程的理解难度，提升用户的交互体验。

图3为本申请实施例所提供的又一种页面元素自动布局方法的流程示意图。

如图3所示，该页面元素自动布局方法可以包括以下步骤：

步骤301，在获取到调用鼠标按下事件函数的第一请求时，根据第一请求中包含的第一位置，确定目标移动元素。

本实施例中，对步骤301的描述可以参见前述实施例中对步骤101的描述，此处不再赘述。

步骤302，根据目标移动元素的尺寸属性，修改预设的插入元素的尺寸属性。

其中，预设的插入元素可以设置为空，即预设的插入元素中未包含具体的内容，仅用于模拟目标移动元素，预设的插入元素可以随鼠标移动。

本实施例中，确定了目标移动元素后，可以进一步确定目标移动元素的尺寸属性，进而根据目标移动元素的尺寸属性，修改预设的插入元素的尺寸属性，将插入元素的尺寸设置为与目标移动元素的尺寸一致，以真实地模拟目标移动元素移动后的效果。

步骤303，调整预设的插入元素的显示属性，以使预设的插入元素处于可见状态。

在网页页面布局中，显示(visibility)属性规定元素是否可见，其可能的值包括可见(visible)、隐藏(hidden)、collapse和inherit，其中，visibility属性的默认值为visible；当visibility属性的值设置为inherit时，规定元素从其父元素继承visibility属性的值。

本实施例中，可以将预设的插入元素的显示属性调整为visible，以使预设的插入元素处于可见状态。

步骤304，根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改预设的插入元素的顺序属性值。

随着鼠标的移动，鼠标的位置不断地发生变化，获取的调用鼠标移动事件函数的第三请求中包含的位置信息也不断变化，本实施例中，可以根据第三请求中的位置信息，修改预设的插入元素的顺序属性值，以使预设的插入元素的插入位置随鼠标的移动实时变化，使用户感知插入预设的插入元素时的布局，并判断插入预设的插入元素后的布局是否满足用户需求，便于在不满足用户需求时进行调整。

作为一种示例，可以根据第三请求中位置信息对应的顺序属性值，修改预设的插入元素的顺序属性值。比如，第三请求中位置信息对应的顺序属性值为3，则将预设的插入元素的顺序属性值调整为3。

步骤305，在获取到调用鼠标抬起事件函数的第二请求时，根据预设的插入元素的顺序属性值，确定目标移动元素的顺序属性值。

本实施例中，当获取到调用鼠标抬起事件函数的第二请求时，可以认为此时鼠标抬起，即用户已确定目标移动元素的插入位置，此时，可以将目标移动元素的顺序属性值调整为预设的插入元素的顺序属性值。

步骤306，调整预设的插入元素的显示属性，以使预设的插入元素处于隐藏状态。

本实施例中，确定了目标移动元素的顺序属性值之后，可以将预设的插入元素的显示属性调整为hidden，以使预设的插入元素处于隐藏状态。

步骤307，根据目标移动元素的顺序属性值，调整目标移动元素的位置。

本实施例中，确定了目标移动元素的顺序属性值之后，即可根据目标移动元素的顺序属性值，调整目标移动元素的位置，将目标移动元素放置在顺序属性值所对应的位置处。

本实施例的页面元素自动布局方法，通过在确定目标移动元素后，根据目标移动元素的尺寸属性，修改预定的插入元素的尺寸属性，并将预设的插入元素的显示属性调整为可见状态，进而根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改预设的插入元素的顺序属性值，并在获取到调用鼠标抬起事件函数的第二请求时，根据预设的插入元素的顺序属性值，确定目标移动元素的顺序属性值，进而将预设的插入元素的显示属性调整为隐藏状态，并根据目标移动元素的顺序属性值，调整目标移动元素的位置，由此，通过设置预设的插入元素随鼠标移动，使得用户能够感知元素移动后的布局，及时获知移动后的布局效果，方便用户随时调整，提高了方法的灵活性和可用性。

为了更加清楚地描述前述实施例中，确定目标移动元素顺序属性值的具体实现过程，本申请实施例提出了另一种页面元素自动布局方法，图4为本申请实施例所提供的再一种页面元素自动布局方法的流程示意图。

如图4所示，基于前述实施例，确定目标移动元素顺序属性值，可以包括以下步骤：

步骤401，根据当前页面中每个容器及每个元素的位置信息，确定第二位置对应的目标对象。

本实施例中，获取到调用鼠标抬起事件函数的第二请求时，可以根据当前页面中每个容器及每个元素的位置信息，确定第二请求中包含的第二位置对应的目标对象。

举例而言，假设当前页面中包含两个容器a1和a2，其中，a1的位置信息为left1＝10，right1＝40，top1＝20，bottom1＝30；a2的位置信息为left2＝10，right2＝40，top2＝30，bottom1＝40。如果第二位置相对于浏览器窗口左上角的坐标值为(23,25)，即第二位置相对于窗口左边距的距离为23，相对于窗口上边距的距离为25，则可以确定第二位置对应的目标对象为容器a1。

步骤402，若第二位置对应的目标对象为空容器，则按照第一预设的规则，生成目标移动元素的顺序属性值。

本实施例中，当确定了第二位置对应的目标对象后，可以进一步判断目标对象是否为空容器，并在目标对象为空容器时，按照第一预设的规则生成目标移动元素的顺序属性值。其中，第一预设的规则可以是随机生成元素的顺序属性值，或者，按照空容器中元素固定的初始顺序属性值生成元素的顺序属性值。

作为一种示例，假设第一预设的规则是随机生成元素的顺序属性值，则当确定第二位置对应的目标对象为空容器时，随机生成目标移动元素的顺序属性值，比如，为目标移动元素生成顺序属性值为2。

作为一种示例，假设第一预设的规则是按照空容器中元素固定的初始顺序属性值生成元素的顺序属性值，且初始顺序属性值为1，则当确定第二位置对应的目标对象为空容器时，为，目标移动元素生成顺序属性值为1。

步骤403，若第二位置对应的目标对象为非空容器，则按照第二预设的规则，生成目标移动元素的顺序属性值。

本实施例中，当确定的第二位置对应的目标对象为非空容器时，则按照第二预设的规则生成目标移动元素的顺序属性值。

作为一种可能的实现方式，按照第二预设的规则生成目标移动元素的顺序属性值时，可以先确定非空容器内元素的布局模式及每个元素的定位值，其中，布局模式指容器中的元素按照从上到下的顺序，或者按照从左到右的顺序进行布局；每个元素的定位值，可以是每个元素的top、bottom、left和right的值。进而，根据元素的布局模式以及每个元素的定位值，可以确定与第二位置对应的顺序属性值，并将与第二位置对应的顺序属性值，确定为目标移动元素的顺序属性值。

进一步地，根据元素的布局模式以及每个元素的定位值，确定与第二位置对应的顺序属性值时，具体地，可以先判断第二位置与第一元素的布局起始位置间的距离，是否小于第二位置与第一元素的布局结束位置间的距离。其中，第一元素是指鼠标当前所在的元素，可以首先根据第二位置以及每个元素的定位值，确定第一元素。如果第二位置与第一元素的布局起始位置间的距离，小于第二位置与第一元素的布局结束位置间的距离，则确定第二位置对应的顺序属性值，小于第一元素的顺序属性值、且与第一元素的顺序属性值相邻。此时，可以根据第一元素的顺序属性值与其前一元素对应的顺序属性值的差值，确定第二位置对应的顺序属性值。比如若第一元素的顺序属性值为X，而其前一元素对应的顺序属性值为X-m，那么可以确定第二位置对应的顺序属性值需要在(X-m，X)之间取值。否则，则确定第二位置对应的顺序属性值，大于第一元素的顺序属性值、且与第一元素的顺序属性值相邻。此时，可以根据第一元素的顺序属性值与其后一元素对应的顺序属性值的差值，确定第二位置对应的顺序属性值。

举例而言，假设布局模式是按照从上到下的顺序进行布局，则在确定第二位置对应的顺序属性值时，可以先判断第二位置中的上边距减去第一元素的上边距所得的值，是否小于第一元素的高度的一半，若是，则确定鼠标在第一元素的上半部分，第二位置对应的顺序属性值小于第一元素的顺序属性值；否则，则确定鼠标在第一元素的下半部分，第二位置对应的顺序属性值大于第一元素的顺序属性值。

假设布局模式是按照从左到右的顺序进行布局，则在确定第二位置对应的顺序属性值时，可以先判断第二位置中的左边距减去第一元素的左边距所得的值，是否小于第一元素的宽度的一半，若是，则确定鼠标在第一元素的左半部分，第二位置对应的顺序属性值小于第一元素的顺序属性值；否则，则确定鼠标在第一元素的右半部分，第二位置对应的顺序属性值大于第一元素的顺序属性值。

进而，可以将第二位置对应的顺序属性值，确定为目标移动元素的顺序属性值，并根据目标移动元素的顺序属性值，调试目标移动元素的位置，实现目标移动元素的自动布局。

本实施例的页面元素自动布局方法，通过在确定目标移动元素的顺序属性值时，根据当前页面中每个容器及每个元素的位置信息，确定第二位置对应的目标对象，并在第二位置对应的目标对象为空容器时，按照第一预设的规则生成目标移动元素的顺序属性值，在第二位置对应的目标对象为非空容器时，按照第二预设的规则生成目标移动元素的顺序属性值，由此，实现了目标移动元素顺序属性值的自动确定，为实现页面元素的自动布局提供了条件。

为了实现上述实施例，本申请还提出一种页面元素自动布局装置。

图5为本申请实施例所提供的一种页面元素自动布局装置的结构示意图。

如图5所示，该页面元素自动布局装置50包括：确定模块510、修改模块520，以及调整模块530。

其中，确定模块510，用于在获取到调用鼠标按下事件函数的第一请求时，根据第一请求中包含的第一位置，确定目标移动元素。

修改模块520，用于在获取到调用鼠标抬起事件函数的第二请求时，根据第二请求中包含的第二位置，修改目标移动元素顺序属性值。

调整模块530，用于根据修改后的目标移动元素顺序属性值，调整目标移动元素的位置。

进一步地，在本申请实施例一种可能的实现方式中，如图6所示，在如图5所示实施例的基础上，该页面元素自动布局装置50还包括：

处理模块540，用于调整目标移动元素的点击事件属性值，以将目标移动元素从鼠标监听对象中移除。

在本申请实施例一种可能的实现方式中，处理模块540还用于调整目标移动元素的位置属性值，以获取目标移动元素相对当前页面的定位值；根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改目标移动元素的定位值。

通过调整目标移动元素的位置属性值，以获取目标移动元素相对当前页面的定位值，根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改目标移动元素的定位值，由此，实现了目标移动元素跟随鼠标移动，使用户感知目标移动元素的移动过程，降低用户对元素移动过程的理解难度，提升用户的交互体验。

在本申请实施例一种可能的实现方式中，如图7所示，在如图5所示实施例的基础上，该页面元素自动布局装置50还可以包括：

尺寸调整模块550，用于根据目标移动元素的尺寸属性，修改预设的插入元素的尺寸属性。

显示属性调整模块560，用于调整预设的插入元素的显示属性，以使预设的插入元素处于可见状态；以及，在调整模块530调整目标移动元素的位置之前，调整预设的插入元素的显示属性，以使预设的插入元素处于隐藏状态。

顺序属性调整模块570，用于根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改预设的插入元素的顺序属性值。

本实施例中，修改模块520具体用于在获取到调用鼠标抬起事件函数的第二请求时，根据预设的插入元素的顺序属性值，确定目标移动元素的顺序属性值。

通过在确定目标移动元素后，根据目标移动元素的尺寸属性，修改预定的插入元素的尺寸属性，并将预设的插入元素的显示属性调整为可见状态，进而根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改预设的插入元素的顺序属性值，并在获取到调用鼠标抬起事件函数的第二请求时，根据预设的插入元素的顺序属性值，确定目标移动元素的顺序属性值，进而将预设的插入元素的显示属性调整为隐藏状态，并根据目标移动元素的顺序属性值，调整目标移动元素的位置，由此，通过设置预设的插入元素随鼠标移动，使得用户能够感知元素移动后的布局，及时获知移动后的布局效果，方便用户随时调整，提高了方法的灵活性和可用性。

在本申请实施例一种可能的实现方式中，如图8所示，在如图5所示实施例的基础上，修改模块520可以包括：

确定单元521，用于根据当前页面中每个容器及每个元素的位置信息，确定第二位置对应的目标对象。

生成单元522，用于在第二位置对应的目标对象为空容器时，按照第一预设的规则，生成目标移动元素的顺序属性值；在第二位置对应的目标对象为非空容器时，按照第二预设的规则，生成目标移动元素的顺序属性值。

具体地，生成单元522按照第二预设的规则，生成目标移动元素的顺序属性值时，用于确定非空容器内元素的布局模式及每个元素的定位值；根据元素的布局模式及每个元素的定位值，确定与第二位置对应的顺序属性值；将与第二位置对应的顺序属性值，确定为目标移动元素的顺序属性值。

进一步地，生成单元522根据元素的布局模式及每个元素的定位值，确定与第二位置对应的顺序属性值时，具体用于判断第二位置与第一元素的布局起始位置间的距离，是否小于第二位置与第一元素的布局结束位置间的距离；若是，则确定第二位置对应的顺序属性值，小于第一元素的顺序属性值、且与第一元素的顺序属性值相邻；否则，则确定第二位置对应的顺序属性值，大于第一元素的顺序属性值、且与第一元素的顺序属性值相邻。

通过在确定目标移动元素的顺序属性值时，根据当前页面中每个容器及每个元素的位置信息，确定第二位置对应的目标对象，并在第二位置对应的目标对象为空容器时，按照第一预设的规则生成目标移动元素的顺序属性值，在第二位置对应的目标对象为非空容器时，按照第二预设的规则生成目标移动元素的顺序属性值，由此，实现了目标移动元素顺序属性值的自动确定，为实现页面元素的自动布局提供了条件。

需要说明的是，前述对页面元素自动布局方法实施例的解释说明也适用于该实施例的页面元素自动布局装置，其实现原理类似，此处不再赘述。

本申请实施例的页面元素自动布局装置，通过在获取到调用鼠标按下事件函数的第一请求时，根据第一请求中包含的第一位置，确定目标移动元素，并在获取到调用鼠标抬起事件函数的第二请求时，根据第二请求中包含的第二位置，修改目标移动元素顺序属性值，进而根据修改后的目标移动元素顺序属性值，调整目标移动元素的位置。由此，通过根据调用鼠标抬起事件函数的第二请求中包含的第二位置修改目标移动元素顺序属性值，根据修改后的目标移动元素顺序属性值调整目标移动元素的位置，实现了目标移动元素布局位置的自动调整，相较于现有技术，无需标记目标移动元素和计算偏移量，即可调整元素位置，实现了页面元素的自动布局，简化了网页布局操作步骤，提高了页面布局的整洁度和美观度。

为了实现上述实施例，本申请还提出一种计算机设备。

图9为本申请实施例所提供的一种计算机设备的结构示意图。如图9所示，该计算机设备80包括：处理器801和存储器802。其中，处理器801通过读取存储器802中存储的可执行程序代码来运行与可执行程序代码对应的程序，以用于实现如前述实施例所述的页面元素自动布局方法。

图10为图示根据本申请实施例的计算机设备的硬件结构示意图。计算机设备可以以各种形式来实施，本申请中的计算机设备可以包括但不限于诸如移动电话、智能电话、笔记本电脑、PDA(个人数字助理)、PAD(平板电脑)等等的移动终端设备以及诸如数字TV、台式计算机等固定终端设备。

如图10所示，计算机设备1100可以包括无线通信单元1110、A/V(音频/视频)输入单元1120、用户输入单元1130、感测单元1140、输出单元1150、存储器1160、接口单元1170、控制器1180和电源单元1190等等。图10示出了具有各种组件的终端设备，但是应理解的是，并不要求实施所有示出的组件。可以替代地实施更多或更少的组件。

其中，无线通信单元1110允许计算机设备1100与无线通信系统或网络之间的无线电通信。A/V输入单元1120用于接收音频或视频信号。用户输入单元1130可以根据用户输入的命令生成键输入数据以控制电子设备的各种操作。感测单元1140检测计算机设备1100的当前状态、计算机设备1100的位置、用户对于电子设备1100的触摸输入的有无、计算机设备1100的取向、计算机设备1100的加速或减速移动和方向等等，并且生成用于控制计算机设备1100的操作的命令或信号。接口单元1170用作至少一个外部装置与计算机设备1100连接可以通过的接口。输出单元1150被构造为以视觉、音频和/或触觉方式提供输出信号。存储器1160可以存储由控制器1180执行的处理和控制操作的软件程序等等，或者可以暂时地存储己经输出或将要输出的数据。存储器1160可以包括至少一种类型的存储介质。而且，计算机设备1100可以与通过网络连接执行存储器1160的存储功能的网络存储装置协作。控制器1180通常控制电子设备的总体操作。另外，控制器1180可以包括用于再现或回放多媒体数据的多媒体模块。控制器1180可以执行模式识别处理，以将在触摸屏上执行的手写输入或者图片绘制输入识别为字符或图像。电源单元1190在控制器1180的控制下接收外部电力或内部电力并且提供操作各元件和组件所需的适当的电力。

本申请提出的页面元素自动布局方法的各种实施方式可以以使用例如计算机软件、硬件或其任何组合的计算机可读介质来实施。对于硬件实施，本申请提出的页面元素自动布局方法的各种实施方式可以通过使用特定用途集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理装置(DSPD)、可编程逻辑装置(PLD)、现场可编程门阵列(FPGA)、处理器、控制器、微控制器、微处理器、被设计为执行这里描述的功能的电子单元中的至少一种来实施，在一些情况下，本申请提出的页面元素自动布局方法的各种实施方式可以在控制器1180中实施。对于软件实施，本申请提出的页面元素自动布局方法的各种实施方式可以与允许执行至少一种功能或操作的单独的软件模块来实施。软件代码可以由以任何适当的编程语言编写的软件应用程序(或程序)来实施，软件代码可以存储在存储器1160中并且由控制器1180执行。

为了实现上述实施例，本申请还提出一种非暂态计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如前述实施例所述的页面元素自动布局方法。

图11为图示根据本申请的实施例的计算机可读存储介质的示意图。如图11所示，根据本申请实施例的计算机可读存储介质300，其上存储有非暂态计算机可读指令310。当该非暂态计算机可读指令310由处理器运行时，执行前述的本申请各实施例的页面元素自动布局方法的全部或部分步骤。

为了实现上述实施例，本申请还提出一种计算机程序产品，当该计算机程序产品中的指令由处理器执行时，实现如前述实施例所述的页面元素自动布局方法。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本申请的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现定制逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本申请的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本申请的实施例所属技术领域的技术人员所理解。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本申请的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。如，如果用硬件来实现和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (12)

1.一种页面元素自动布局方法，其特征在于，包括：

在获取到调用鼠标按下事件函数的第一请求时，根据所述第一请求中包含的第一位置，确定目标移动元素；

在获取到调用鼠标抬起事件函数的第二请求时，根据所述第二请求中包含的第二位置，修改所述目标移动元素顺序属性值；

根据修改后的所述目标移动元素顺序属性值，调整所述目标移动元素的位置。

2.如权利要求1所述的方法，其特征在于，所述确定目标移动元素之后，还包括：

调整所述目标移动元素的点击事件属性值，以将所述目标移动元素从鼠标监听对象中移除。

3.如权利要求1所述的方法，其特征在于，所述确定目标移动元素之后，还包括：

调整所述目标移动元素的位置属性值，以获取所述目标移动元素相对当前页面的定位值；

根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改所述目标移动元素的定位值。

4.如权利要求1所述的方法，其特征在于，所述确定目标移动元素之后，还包括：

根据所述目标移动元素的尺寸属性，修改预设的插入元素的尺寸属性；

调整预设的插入元素的显示属性，以使所述预设的插入元素处于可见状态；

根据获取的调用鼠标移动事件函数的第三请求中的位置信息，修改所述预设的插入元素的顺序属性值。

5.如权利要求4所述的方法，其特征在于，所述修改所述目标移动元素顺序属性值，包括：

在获取到调用鼠标抬起事件函数的第二请求时，根据所述预设的插入元素的顺序属性值，确定所述目标移动元素的顺序属性值。

6.如权利要求5所述的方法，其特征在于，所述调整所述目标移动元素的位置之前，还包括：

调整预设的插入元素的显示属性，以使所述预设的插入元素处于隐藏状态。

7.如权利要求1-6任一项所述的方法，其特征在于，所述确定所述目标移动元素顺序属性值，包括：

根据当前页面中每个容器及每个元素的位置信息，确定所述第二位置对应的目标对象；

若所述第二位置对应的目标对象为空容器，则按照第一预设的规则，生成所述目标移动元素的顺序属性值；

若所述第二位置对应的目标对象为非空容器，则按照第二预设的规则，生成所述目标移动元素的顺序属性值。

8.如权利要求7所述的方法，其特征在于，所述按照第二预设的规则，生成所述目标移动元素的顺序属性值，包括：

确定所述非空容器内元素的布局模式及每个元素的定位值；

根据所述元素的布局模式及每个元素的定位值，确定与所述第二位置对应的顺序属性值；

将与所述第二位置对应的顺序属性值，确定为所述目标移动元素的顺序属性值。

9.如权利要求8所述的方法，其特征在于，所述根据所述元素的布局模式及每个元素的定位值，确定与所述第二位置对应的顺序属性值，包括：

判断所述第二位置与第一元素的布局起始位置间的距离，是否小于所述第二位置与所述第一元素的布局结束位置间的距离；

若是，则确定所述第二位置对应的顺序属性值，小于所述第一元素的顺序属性值、且与所述第一元素的顺序属性值相邻；

否则，则确定所述第二位置对应的顺序属性值，大于所述第一元素的顺序属性值、且与所述第一元素的顺序属性值相邻。

10.一种页面元素自动布局装置，其特征在于，包括：

确定模块，用于在获取到调用鼠标按下事件函数的第一请求时，根据所述第一请求中包含的第一位置，确定目标移动元素；

修改模块，用于在获取到调用鼠标抬起事件函数的第二请求时，根据所述第二请求中包含的第二位置，修改所述目标移动元素顺序属性值；

调整模块，用于根据修改后的所述目标移动元素顺序属性值，调整所述目标移动元素的位置。

11.一种计算机设备，其特征在于，包括处理器和存储器；

其中，所述处理器通过读取所述存储器中存储的可执行程序代码来运行与所述可执行程序代码对应的程序，以用于实现如权利要求1-9中任一项所述的页面元素自动布局方法。

12.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-9中任一项所述的页面元素自动布局方法。