CN111814087B - Web窗口的动态布局方法、装置、电子设备及可读存储介质 - Google Patents

Abstract

本申请提供了一种Web窗口的动态布局方法、装置、电子设备及可读存储介质。方法包括：检测到针对属于第一Web窗口的第一Web面板的移动起始指令时，依据移动起始指令，将第一Web面板的数据信息发送至预置的数据中心；检测到针对第一Web面板的移动结束指令，移动结束指令包括移动终点位置信息，确定移动终点位置信息对应的Web窗口；从数据中心获取第一Web面板的数据信息，并在移动终点位置信息对应的Web窗口中放置第一Web面板。本申请提供的Web窗口的动态布局方法通过将Web面板移动信息发送至数据中心，由数据中心进行全局性判断和分配，将Web面板动态分配到合适的Web窗口中，实现单窗口或多窗口的动态布局，从而充分满足用户对Web应用设计布局的自定义需求。

Description

Web窗口的动态布局方法、装置、电子设备及可读存储介质

技术领域

本申请涉及信息处理技术领域，具体而言，本申请涉及一种Web窗口的动态布局方法、装置、电子设备及可读存储介质。

背景技术

随着近几年的Web技术发展，HTML(Hyper Text Markup Language,超文本标记语言)已经不仅仅局限于开发简单的网页应用。许多桌面端的Web应用如雨后春笋般地出现，在这种情况下，现有Web技术的局限性就慢慢的体现出来了。现有的窗口中面板均采用静态固定布局，而随着人们对Web应用的个性化需求越来越明显，也就提出对Web应用的设计布局提出可自定义的功能需求，而单纯的使用HTML技术无法实现单窗口多面板的动态调整分布，更无法实现多窗口、多客户端的动态布局，也就无法满足越来越多的交互复杂的客户端程序设计要求。

发明内容

基于此，为解决上述提到的至少一个问题，本申请提供了一种Web窗口动态布局方法、装置、电子设备及可读存储介质。

第一方面，提供了一种Web窗口的动态布局方法，任一Web窗口中包括至少一个Web面板，方法包括：

检测到针对属于第一Web窗口的第一Web面板的移动起始指令时，依据移动起始指令，将第一Web面板的数据信息发送至预置的数据中心；

检测到针对第一Web面板的移动结束指令时，移动结束指令包括移动终点位置信息，确定移动终点位置信息对应的Web窗口；

从数据中心获取第一Web面板的数据信息，并在移动终点位置信息对应的Web窗口中放置第一Web面板。

在其中一个实施例中，移动终点位置信息对应的Web窗口为第二Web窗口。

在一可行的实施例中，检测到针对第一Web面板的移动结束指令后，还包括：

检测是否存在任一Web面板正在执行放置第一Web面板的操作；

如有，则在第一Web窗口中关闭第一Web面板。

在一可行的实施例中，在第二Web窗口中放置第一Web面板的步骤包括：

当移动终点位置信息位于第二Web窗口中的第二Web面板内时，调整第二Web面板的大小和/或位置，将第一Web面板放置于移动终点位置信息对应的位置上。

在一可行的实施例中，调整第二Web面板的大小和/或位置的步骤包括：

根据第二Web面板在第二Web窗口上的尺寸信息，以预定比例将第二Web面板沿自身一侧边沿缩小。

在一可行的实施例中，在第二Web窗口中放置第一Web面板的步骤包括：

当移动终点位置信息位于第二Web窗口中若干个第三Web面板的交界位置处时，调整第二Web窗口上若干个第三Web面板的大小和/或位置，将第一Web面板放置于移动终点位置信息对应的位置上。

在一可行的实施例中，调整第二Web窗口上若干个第三Web面板的大小和/或位置包括：

根据第二Web窗口上若干个第三Web面板与第一Web面板的空间尺寸比例，将第一Web面板缩小或放大，将第二Web窗口上若干个第三Web面板缩小。

在其中一个实施例中，当移动终点位置信息对应的Web窗口为第一Web窗口，在移动终点位置信息对应的Web窗口中放置第一Web面板，包括：

在第一Web窗口中的新位置放置第一Web面板；新位置为移动终点位置信息对应的位置。

在其中一个实施例中，将第一Web面板的数据信息发送至预置的数据中心的步骤之后，还包括：

确定第一Web面板存在于第二Web窗口中；

激活第二Web窗口。

在其中一个实施例中，Web面板为HTML元素。

第二方面，提供了一种Web窗口的动态布局装置，任一Web窗口中包括至少一个Web面板，装置包括：

获取模块，用于检测到针对属于第一Web窗口的第一Web面板的移动起始指令时，依据移动起始指令，将第一Web面板的数据信息发送至预置的数据中心；

定位模块，用于检测到针对第一Web面板的移动结束指令，移动结束指令包括移动终点位置信息，确定移动终点位置信息对应的Web窗口；

放置模块，用于从数据中心获取第一Web面板的数据信息，并在移动终点位置信息对应的Web窗口中放置第一Web面板。

在其中一个实施例中，当移动终点位置信息对应的Web窗口为第二Web窗口，在移动终点位置信息对应的Web窗口中放置第一Web面板，包括：

在第二Web窗口中放置第一Web面板。

在一可行的实施例中，检测到针对第一Web面板的移动结束指令后，还包括：

检测是否存在任一Web面板正在执行放置第一Web面板的操作；

如有，则在第一Web窗口中关闭第一Web面板。

在一可行的实施例中，在第二Web窗口中放置第一Web面板的步骤包括：

当移动终点位置信息位于第二Web窗口中的第二Web面板内时，调整第二Web面板的大小和/或位置，将第一Web面板放置于移动终点位置信息对应的位置上。

在一可行的实施例中，调整第二Web面板的大小和/或位置的步骤包括：

根据第二Web面板在第二Web窗口上的尺寸信息，以预定比例将第二Web面板沿自身一侧边沿缩小。

在一可行的实施例中，在第二Web窗口中放置第一Web面板的步骤包括：

当移动终点位置信息位于第二Web窗口中若干个第三Web面板的交界位置处时，调整第二Web窗口上若干个第三Web面板的大小和/或位置，将第一Web面板放置于移动终点位置信息对应的位置上。

在一可行的实施例中，调整第二Web窗口上若干个第三Web面板的大小和/或位置包括：

根据第二Web窗口上若干个第三Web面板与第一Web面板的空间尺寸比例，将第一Web面板缩小或放大，将第二Web窗口上若干个第三Web面板缩小。

在其中一个实施例中，当移动终点位置信息对应的Web窗口为第一Web窗口，在移动终点位置信息对应的Web窗口中放置第一Web面板，包括：

在第一Web窗口中的新位置放置第一Web面板；新位置为移动终点位置信息对应的位置。

在其中一个实施例中，将第一Web面板的数据信息发送至预置的数据中心的步骤之后，还包括：

确定第一Web面板存在于第二Web窗口中；

激活第二Web窗口。

在其中一个实施例中，Web面板为HTML元素。

第三方面，提供了一种电子设备，其包括：

一个或多个处理器；

存储器；

一个或多个应用程序，其中一个或多个应用程序被存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序配置用于：执行如本申请的第一方面所示的Web窗口的动态布局方法。

第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本申请第一方面所示的Web窗口的动态布局方法。

本申请提供的Web窗口的动态布局方法通过将Web面板移动信息发送至数据中心，由数据中心进行全局性判断和分配，将Web面板动态分配到合适的Web窗口中，能够实现单窗口、多窗口的动态布局，从而充分满足用户对Web应用设计布局的自定义化需求。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对本申请实施例描述中所需要使用的附图作简单地介绍。

图1为本申请实施例提供的一种Web窗口的动态布局方法的流程示意图；

图2为本申请实施例提供的一种Web面板移动前Web窗口的Web面板布局示意图；

图3为本申请图2提供的Web面板移动后Web窗口的Web面板布局示意图；

图4为本申请实施例提供的另一种Web面板移动前Web窗口的Web面板布局示意图；

图5为本申请图4提供的Web面板移动后Web窗口的Web面板布局示意图；

图6为本申请实施例提供的一种Web窗口的动态布局装置的结构示意图；

图7为本申请实施例提供的一种电子设备的结构示意图。

具体实施方式

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

本技术领域技术人员可以理解，除非特意声明，这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是，本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件，但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解，当我们称元件被“连接”或“耦接”到另一元件时，它可以直接连接或耦接到其他元件，或者也可以存在中间元件。此外，这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。

现有的桌面端Web应用中，最普遍的Web端布局，仅仅是打开或者关闭一些当前预制在页面内的窗口。无法动态地添加非预设的面板、更改面板所在位置，只能在预设的位置显示或隐藏指定的Web面板。另外，也无法实现多窗口间的灵活动态布局。

本申请提供的Web窗口的动态布局方法、装置、电子设备和可读存储介质，旨在解决现有技术的如上技术问题。

下面以具体地实施例对本申请的技术方案以及本申请的技术方案如何解决上述技术问题进行详细说明。下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。下面将结合附图，对本申请的实施例进行描述。

第一方面，本申请一实施例中提供了一种Web窗口的动态布局方法。任一Web窗口中包括至少一个Web面板，Web面板是一种可视化的UI界面，基于一份预设的数据打开对应的Web窗口的时候，根据数据内的信息，使用HTML CSS(Cascading Style Sheets，层叠样式表)将原本是一个整体的Web窗口，布局成几部分小区域，并且在这些区域内，还可以继续进行布局切分，直到在Web页面的内容以多个Web面板的形式呈现在Web窗口中。如图1所示，本申请提供的Web窗口的动态布局方法包括：

步骤S100：检测到针对属于第一Web窗口的第一Web面板的移动起始指令时，依据移动起始指令，将第一Web面板的数据信息发送至预置的数据中心。

步骤S200：检测到针对第一Web面板的移动结束指令，移动结束指令包括移动终点位置信息，确定移动终点位置信息对应的Web窗口。

步骤S300：从数据中心获取第一Web面板的数据信息，并在移动终点位置信息对应的Web窗口中放置第一Web面板。

在一个可行的实施方式中，Web面板为HTML元素。每一个Web面板都是一个HTML元素，通过对HTML元素的填充操作，来显示指定的Web面板内容，而Web面板的布局是通过递归嵌套HTML元素来实现。

Web面板的移动方式之一是对Web面板进行鼠标拖拽操作，拖拽是基于HTML元素上的drag事件(事件主体是被拖放元素，在正在拖放被拖放元素时触发)，通过dragstart(元素开始拖拽)后将数据发送给数据中心，dragend(元素拖拽结束)、drop(将某个元素放置到当前元素上)的时候目标窗口主动去和数据中心进行数据比对来判断是否允许放置布局，以及是否需要重新计算以及刷新当前的布局信息。这些是通过HTML的drag功能实现的。

上述实施例中提供的Web窗口的动态布局方法通过检测Web面板的移动信息，并将该移动信息发送至数据中心，由数据中心进行全局性判断和分配，将Web面板根据现有Web窗口的具体情况动态分配到合适的Web窗口中，能够实现单窗口多面板的自由调整，甚至能够实现多窗口间的Web面板动态布局，充分满足用户对Web应用设计布局的自定义化需求，提高用户对Web应用的使用体验满意度。

具体而言，对于步骤S100，移动起始指令是某一Web面板的移动信息的一部分，表明某一Web面板被选中并会被移动，该移动信息还包括移动结束指令。移动信息的具体实现形式例如：鼠标点击激活某一Web面板并将其在人机交互界面内拖动，或者是鼠标点击激活某一Web面板后，在另一位置处再点击，将该Web面板放置在该“另一位置处”。

一旦检测到移动起始指令，Web窗口将该Web面板的数据信息发送到预置的数据中心，Web面板必然位于一个Web窗口当中，例如第一Web面板位于第一Web窗口当中，当需要移动Web面板时，数据中心获取到发送过来的第一Web面板的数据信息，该数据信息包括第一Web面板的位置信息、形状信息和尺寸信息等，为后续的动态分配提供基础。

对于步骤S200，系统还会检测到面板的移动结束指令，延续步骤S100，具体是检测到第一Web面板的移动结束指令，该移动结束指令记录有第一Web面板将要放置的位置，也即移动结束指令包括移动终点位置信息。由于Web面板必然放置在某一Web窗口当中，因此，移动终点位置信息对应的移动终点位置必然位于某一Web窗口内，从而根据移动结束指令确定移动终点位置信息对应的Web窗口。该第一Web面板的移动终点位置信息对应的Web窗口可以是第一Web窗口，也可以是除第一Web窗口以外的其他Web窗口，即，Web面板可在同一面板内移动分布，也可以移动分布到其他已经被打开的Web窗口当中。

对于步骤S300，通常情况下，多个Web窗口之间相互独立，彼此并不知晓对方的存在，而数据中心则能够获取所有打开的Web窗口的信息，因此，经步骤S100之后发送到数据中心的第一Web面板的数据信息经数据中心处理判断后，会下发到移动终点位置信息对应的Web窗口中，并在该Web窗口中某一位置放置第一Web面板，该位置即为移动终点位置信息对应的位置。

在一可行的实施例中，移动终点位置信息对应的Web窗口为第二Web窗口。在移动终点位置信息对应的Web窗口中放置第一Web面板，包括：在第二Web窗口中放置第一Web面板。当多个Web窗口被打开，需要将Web面板从一个Web窗口中布局到其他Web窗口时，具体可通过本实施例提供的技术方案实现。另外，当检测到针对第一Web面板的移动结束指令后，可能还包括下列情形：

检测是否存在任一Web窗口正在执行放置第一Web面板的操作；

如有，则在第一Web窗口中关闭第一Web面板。

也即，待移动的第一Web面板可能正在被操作当中，例如有某一Web窗口正在尝试放置第一Web面板，则将第一Web面板在原先存在的第一Web窗口中关闭，以减少Web面板的显示位置，提高界面的有序化和简洁度。

当从数据中心获取到第一Web面板的数据信息后，需要考虑将第一Web面板放置到具体的Web窗口某一位置上。由于Web窗口往往已经分布有其他Web面板，因此需要分情况对Web面板的放置进行具体处理。

一个可行的实施例中，在第二Web窗口中放置第一Web面板的步骤具体包括：当移动终点位置信息位于第二Web窗口中的第二Web面板内时，调整第二Web面板的大小和/或位置，将第一Web面板放置于移动终点位置信息对应的位置上。这种情况是针对将新Web面板放置到Web窗口内原有Web面板上的情形，由于Web窗口内的空间已经被原有Web面板占据，需要将新Web窗口按照自定义的要求放置，就必须将空间腾出，因此需要调整第二Web窗口中的第二Web面板的大小，甚至需要调整第二Web面板的位置。在某些情况下，还需要调整第一Web面板的大小，因为第一Web面板可能占据的空间较大，直接放到第二Web窗口中，即使调整了第二Web面板也仍然存在空间不够的问题。

具体而言，调整第二Web面板的大小和/或位置的步骤包括：

根据第二Web面板在第二Web窗口上的尺寸信息，以预定比例将第二Web面板沿自身一侧边沿缩小。数据中心将获取到的第一Web面板的数据信息，以及第二Web窗口信息和第二Web面板信息，能够计算出需要调整的幅度，将第二Web面板缩小，以腾出空间给第一Web面板。第二Web面板缩小的方式一般是沿自身一侧边沿进行，根据第一Web面板的移动信息中的移动终点位置信息具体确定，例如可使第二Web面板由上边沿向下边沿收缩，或者沿左边沿向右边沿收缩等。在一种情况下，可以达到在第二Web面板原先占据的第二Web窗口的空间内，均匀放置第一Web面板和第二Web面板的效果。

如图2和图3所示，将窗口1中的Web面板A放入到Web窗口2的Web面板B上，具体位置在Web面板B的虚线位置处。放入后，Web面板A和Web面板B均缩小，同时放置在原先Web面板B在Web窗口2所在的空间内。不排除相应调整Web窗口2中其他Web面板C和Web面板D的尺寸，以其他形式放入Web面板A。本领域技术人员可知的，Web面板A上的内容相应可隐藏设置，而仅含有Web面板A的Web窗口1执行关闭操作。

在另一种可行的实施例中，在第二Web窗口中放置第一Web面板的步骤包括：

当移动终点位置信息位于第二Web窗口中若干个第三Web面板的交界位置处时，调整第二Web窗口上若干个第三Web面板的大小和/或位置，将第一Web面板放置于移动终点位置信息对应的位置上。这种情况不同于前述的将新Web面板放置于原有Web面板之上的情况，第二Web窗口内可能存在多个Web面板，例如2个Web面板并列上下分布或左右分布，3个Web面板一左两右分布等等，恰巧将第一Web面板放置于第二Web窗口上若干个第三Web面板的交界处，相当于将第一Web面板挤入到第二Web窗口内。这种情况下，需要同时调整第二Web窗口内的多个第三Web面板，需要说明的是，尽管将第二Web窗口的Web面板统一命名为第三Web面板，并不意味着这些Web面板的大小、内容等信息相同。

具体而言，调整第二Web窗口上若干个第三Web面板的大小和/或位置包括：

根据第二Web窗口上若干个第三Web面板与第一Web面板的空间尺寸比例，将第一Web面板缩小或放大，将第二Web窗口上若干个第三Web面板缩小。由于需要在固定的Web窗口内新加入一个需要占据一定空间的Web面板，因此一般是将原先已经存在的Web面板缩小，而将新加入的Web面板根据其原先的状态具体调整，可能缩小，也可能放大。为达成计算量小和显示美观的目的，采用根据各面板原先的空间尺寸比例调整方式，特别是对于第二Web窗口上的若干个第三Web面板而言，采用保持同比例缩放的方式。

如图4和图5所示，将窗口1中的Web面板A放入到Web窗口2的Web面板B上，具体位置在Web面板B的虚线位置处。放入后，Web面板A、Web面板B、Web面板C和Web面板D均缩小，合理将四个Web面板布局在Web窗口2内。同样也不排除通过以其他形式相应调整Web窗口2中各Web面板，合理放入Web面板A。

对于将Web窗口和Web面板进行缩小放大，或者进行形状改变的具体实现方式，对于计算机领域的技术人员而言是一种现有技术，在此不做详细赘述。另外，在将第一Web面板放入到第二Web窗口中之后，也并不排除对第一Web面板进行单独调整。

作为另一可行的实施例，如上文提到，Web面板也能在当前所在的Web窗口内移动分布，具体为：当移动终点位置信息对应的Web窗口为第一Web窗口，在移动终点位置信息对应的Web窗口中放置第一Web面板，详细过程包括：在第一Web窗口中的新位置放置第一Web面板；新位置为移动终点位置信息对应的位置。对于需要移动的第一Web面板，可以将Web面板参照前述的方法放到新位置上，当然，由于在同一Web窗口内，也可以只将其他Web面板移动位置即可。

在一种可行的实施例中，将第一Web面板的数据信息发送至预置的数据中心的步骤之后，还包括：

确定第一Web面板存在于第二Web窗口中；

激活第二Web窗口。

这种情况是对于在多个Web窗口中已经存在相同Web面板的情形，用户在打开多个Web窗口后，Web面板随之打开。Web窗口数量过多的时候，用户就容易遗忘已经含有待操作的Web面板的Web窗口，为避免重复操作，可通过将已存有第一Web面板的第二Web窗口变成为当前Web窗口的操作，快速完成Web面板的布局。这里的第二Web窗口是异于第一Web窗口的众多已经被打开的Web窗口中的一个，而第一Web窗口含有待操作的第一Web面板。由于是直接激活显示已经具有待重新布局的Web面板的第二Web窗口，不一定完全符合用户的需求，因此也可选择在激活第二Web窗口后执行前文描述的将Web面板布局到不存在该Web面板的Web窗口中的操作，具体内容参见前文叙述。

第二方面，提供了一种Web窗口的动态布局装置10，任一Web窗口中包括至少一个Web面板，如图6所示，装置包括获取模块11、定位模块12和放置模块13。

获取模块11用于检测到针对属于第一Web窗口的第一Web面板的移动起始指令时，依据移动起始指令，将第一Web面板的数据信息发送至预置的数据中心。

定位模块12用于检测到针对第一Web面板的移动结束指令，移动结束指令包括移动终点位置信息，确定移动终点位置信息对应的Web窗口。

放置模块13用于从数据中心获取第一Web面板的数据信息，并在移动终点位置信息对应的Web窗口中放置第一Web面板。

本申请实施例中提供的Web窗口的动态布局装置通过检测Web面板的移动信息，并将该移动信息发送至数据中心，由数据中心进行全局性判断和分配，将Web面板根据现有Web窗口的具体情况动态分配到合适的Web窗口中，能够实现单窗口多面板的自由调整，甚至能够实现多窗口间的Web面板动态布局，充分满足用户对Web应用设计布局的自定义化需求，提高用户对Web应用的使用体验满意度。

当移动终点位置信息对应的Web窗口为第二Web窗口，在移动终点位置信息对应的Web窗口中放置第一Web面板，包括：在第二Web窗口中放置第一Web面板。

检测到针对第一Web面板的移动结束指令后，还包括：检测是否存在任一Web面板正在执行放置第一Web面板的操作。如有，则在第一Web窗口中关闭第一Web面板。

而放置模块13在第二Web窗口中放置第一Web面板的步骤包括：当移动终点位置信息位于第二Web窗口中的第二Web面板内时，调整第二Web面板的大小和/或位置，将第一Web面板放置于移动终点位置信息对应的位置上。调整第二Web面板的大小和/或位置的步骤具体包括：根据第二Web面板在第二Web窗口上的尺寸信息，以预定比例将第二Web面板沿自身一侧边沿缩小。

或者，放置模块13在第二Web窗口中放置第一Web面板的步骤包括：当移动终点位置信息位于第二Web窗口中若干个第三Web面板的交界位置处时，调整第二Web窗口上若干个第三Web面板的大小和/或位置，将第一Web面板放置于移动终点位置信息对应的位置上。具体的，调整第二Web窗口上若干个第三Web面板的大小和/或位置包括：根据第二Web窗口上若干个第三Web面板与第一Web面板的空间尺寸比例，将第一Web面板缩小或放大，将第二Web窗口上若干个第三Web面板缩小。

当移动终点位置信息对应的Web窗口为第一Web窗口，放置模块13在移动终点位置信息对应的Web窗口中放置第一Web面板，包括：在第一Web窗口中的新位置放置第一Web面板；新位置为移动终点位置信息对应的位置。

获取模块将第一Web面板的数据信息发送至预置的数据中心的步骤之后，还包括：确定第一Web面板存在于第二Web窗口中；激活第二Web窗口。

第三方面，提供了一种电子设备，其包括：

一个或多个处理器；

存储器；

一个或多个应用程序，其中一个或多个应用程序被存储在存储器中并被配置为由一个或多个处理器执行，一个或多个程序配置用于：执行如本申请的第一方面所示的Web窗口的动态布局方法。

本申请实施例中提供的电子设备能够实现单窗口多面板的自由调整，甚至能够实现多窗口间的Web面板动态布局，充分满足用户对Web应用设计布局的自定义化需求，提高用户对Web应用的使用体验满意度。

在一个可选实施例中提供了一种电子设备，如图7所示，图7所示的电子设备1000包括：处理器1001和存储器1003。其中，处理器1001和存储器1003相连，如通过总线1002相连。可选地，电子设备1000还可以包括收发器1004。需要说明的是，实际应用中收发器1004不限于一个，该电子设备1000的结构并不构成对本申请实施例的限定。

处理器1001可以是CPU(Central Processing Unit，中央处理器)，通用处理器，DSP(Digital Signal Processor，数据信号处理器)，ASIC(Application SpecificIntegrated Circuit，专用集成电路)，FPGA(Field Programmable Gate Array，现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器1001也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，DSP和微处理器的组合等。

总线1002可包括一通路，在上述组件之间传送信息。总线1002可以是PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture，扩展工业标准结构)总线等。总线1002可以分为地址总线、数据总线、控制总线等。为便于表示，图7中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

存储器1003可以是ROM(Read Only Memory，只读存储器)或可存储静态信息和指令的其他类型的静态存储设备，RAM(Random Access Memory，随机存取存储器)或者可存储信息和指令的其他类型的动态存储设备，也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory，电可擦可编程只读存储器)、CD-ROM(Compact DiscRead Only Memory，只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质，但不限于此。

存储器1003用于存储执行本申请方案的应用程序代码，并由处理器1001来控制执行。处理器1001用于执行存储器1003中存储的应用程序代码，以实现前述方法实施例所示的内容。

第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本申请第一方面所示的Web窗口的动态布局方法。

本申请实施例中提供的计算机可读存储介质通过执行本申请第一方面描述的Web窗口的动态布局方法，能够实现单窗口多面板的自由调整，甚至能够实现多窗口间的Web面板动态布局，充分满足用户对Web应用设计布局的自定义化需求，提高用户对Web应用的使用体验满意度。

应该理解的是，虽然附图的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，其可以以其他的顺序执行。而且，附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，其执行顺序也不必然是依次进行，而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。

以上所述仅是本发明的部分实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (13)

1.一种Web窗口的动态布局方法，其特征在于，任一Web窗口中包括至少一个Web面板，所述方法包括：

检测到针对属于第一Web窗口的第一Web面板的移动起始指令时，依据所述移动起始指令，将所述第一Web面板的数据信息发送至预置的数据中心；

检测到针对所述第一Web面板的移动结束指令时，所述移动结束指令包括移动终点位置信息，确定所述移动终点位置信息对应的Web窗口；

从所述数据中心获取所述第一Web面板的数据信息，将所获取的所述数据信息与所述移动终点位置信息对应的Web窗口进行数据比对，若数据比对结果为允许放置布局，则在所述移动终点位置信息对应的Web窗口中放置所述第一Web面板；

重新计算并刷新所述移动终点位置信息对应的Web窗口当前的布局信息。

2.根据权利要求1所述的Web窗口的动态布局方法，其特征在于，所述移动终点位置信息对应的Web窗口为第二Web窗口。

3.根据权利要求2所述的Web窗口的动态布局方法，其特征在于，检测到针对所述第一Web面板的移动结束指令后，还包括：

检测是否存在任一Web面板正在执行放置所述第一Web面板的操作；

如有，则在所述第一Web窗口中关闭所述第一Web面板。

4.根据权利要求2所述的Web窗口的动态布局方法，其特征在于，在所述第二Web窗口中放置所述第一Web面板的步骤包括：

当所述移动终点位置信息位于所述第二Web窗口中的第二Web面板内时，调整所述第二Web面板的大小和/或位置，将所述第一Web面板放置于所述移动终点位置信息对应的位置上。

5.根据权利要求4所述的Web窗口的动态布局方法，其特征在于，所述调整所述第二Web面板的大小和/或位置的步骤包括：

根据所述第二Web面板在所述第二Web窗口上的尺寸信息，以预定比例将所述第二Web面板沿自身一侧边沿缩小。

6.根据权利要求2所述的Web窗口的动态布局方法，其特征在于，在所述第二Web窗口中放置所述第一Web面板的步骤包括：

当所述移动终点位置信息位于所述第二Web窗口中若干个第三Web面板的交界位置处时，调整所述第二Web窗口上若干个所述第三Web面板的大小和/或位置，将所述第一Web面板放置于所述移动终点位置信息对应的位置上。

7.根据权利要求6所述的Web窗口的动态布局方法，其特征在于，所述调整所述第二Web窗口上若干个所述第三Web面板的大小和/或位置包括：

根据第二Web窗口上若干个所述第三Web面板与所述第一Web面板的空间尺寸比例，将所述第一Web面板缩小或放大，将所述第二Web窗口上若干个所述第三Web面板缩小。

8.根据权利要求1所述的Web窗口的动态布局方法，其特征在于，当所述移动终点位置信息对应的Web窗口为所述第一Web窗口，所述在所述移动终点位置信息对应的Web窗口中放置所述第一Web面板，包括：

在所述第一Web窗口中的新位置放置所述第一Web面板；所述新位置为所述移动终点位置信息对应的位置。

9.根据权利要求1所述的Web窗口的动态布局方法，其特征在于，

所述将所述第一Web面板的数据信息发送至预置的数据中心的步骤之后，还包括：

确定所述第一Web面板存在于第二Web窗口中；

激活所述第二Web窗口。

10.根据权利要求1～9任一所述的Web窗口的动态布局方法，其特征在于，所述Web面板为HTML元素。

11.一种Web窗口的动态布局装置，其特征在于，任一Web窗口中包括至少一个Web面板，所述装置包括：

获取模块，用于检测到针对属于第一Web窗口的第一Web面板的移动起始指令时，依据所述移动起始指令，将所述第一Web面板的数据信息发送至预置的数据中心；

定位模块，用于检测到针对所述第一Web面板的移动结束指令，所述移动结束指令包括移动终点位置信息，确定所述移动终点位置信息对应的Web窗口；

放置模块，用于从所述数据中心获取所述第一Web面板的数据信息，将所获取的所述数据信息与所述移动终点位置信息对应的Web窗口进行数据比对，若数据比对结果为允许放置布局，则在所述移动终点位置信息对应的Web窗口中放置所述第一Web面板；重新计算并刷新所述移动终点位置信息对应的Web窗口当前的布局信息。

12.一种电子设备，其特征在于，其包括：

一个或多个处理器；

存储器；

一个或多个应用程序，其中所述一个或多个应用程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行，所述一个或多个程序配置用于：执行根据权利要求1～10任一项所述的Web窗口的动态布局方法。

13.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1～10任一项所述的Web窗口的动态布局方法。

Images