CN118092761A - 一种操作界面的交互方法、相关装置、设备以及存储介质 - Google Patents

Abstract

本申请公开了一种操作界面的交互方法，应用场景至少包括各类终端，如：手机、电脑、车载终端等。本申请包括：响应针对于目标地址信息的选择操作，在浏览器中显示目标操作界面；当检测到针对于第一停靠面板的拖动操作时，控制第一停靠面板按照拖动操作的触点轨迹进行移动；当检测到拖动操作的触点位置位于第一停靠容器内时，显示针对于第一停靠容器的子容器定位器；在拖动操作结束的情况下，若检测到拖动操作的触点结束位置位于第一停靠容器内，则在第一停靠容器内显示满足预览效果的第一停靠面板。本申请还提供了装置、设备及存储介质。本申请一方面能够节省设备本地的存储资源，另一方面，无需等待客户端下载和更新的时间，可节省时间成本。

Description

一种操作界面的交互方法、相关装置、设备以及存储介质

技术领域

本申请涉及计算机技术领域，尤其涉及一种操作界面的交互方法、相关装置、设备以及存储介质。

背景技术

随着计算机技术的飞速发展，如今各种游戏、小程序、视频、网站都离不开超文本标记语言(hyper text markup language，HTML)技术。HTML是一种建立网页文件的语言，通过标记式的指令，将影像、声音、图片、文字动画、影视等内容显示出来。

面向用户提供了一些软件开发平台，可提供软件生命周期中所需要的大部分工具，用于生成不同类型的应用程序。目前，常用的软件开发平台包含但不仅限于微软开发工具集(Microsoft Visual Studio，VS)、Devexpress的软件开发包以及基于应用程序开发框架的小工具(Qt Widgets)等。

发明人发现目前的方案中至少存在如下问题，目前提供的软件开发平台主要是基于客户端实现的。因此，通常需要提前下载和安装客户端，如果平台版本更新，还需要下载更新包。由此，不仅会占用较多的本地存储资源，而且导致时间成本较高。

发明内容

本申请实施例提供了一种操作界面的交互方法、相关装置、设备以及存储介质。基于本申请提供的方法，一方面能够节省设备本地的存储资源，另一方面，无需等待客户端下载和更新的时间，从而节省时间成本。

有鉴于此，本申请一方面提供一种操作界面的交互方法，包括：

响应针对于目标地址信息的选择操作，在浏览器中显示目标操作界面，其中，目标地址信息用于加载目标操作界面，目标操作界面包括M个停靠容器以及至少一个停靠面板，停靠容器用于容纳停靠面板，M为大于或等于1的整数；

当检测到针对于第一停靠面板的拖动操作时，控制第一停靠面板按照拖动操作的触点轨迹进行移动；

当检测到拖动操作的触点位置位于第一停靠容器内时，显示针对于第一停靠容器的子容器定位器，其中，第一停靠容器的子容器定位器用于同步第一停靠面板位于第一停靠容器的预览效果，第一停靠容器属于M个停靠容器；

在拖动操作结束的情况下，若检测到拖动操作的触点结束位置位于第一停靠容器内，则在第一停靠容器内显示满足预览效果的第一停靠面板。

本申请另一方面提供一种操作界面交互装置，包括：

显示模块，用于响应针对于目标地址信息的选择操作，在浏览器中显示目标操作界面，其中，目标地址信息用于加载目标操作界面，目标操作界面包括M个停靠容器以及至少一个停靠面板，停靠容器用于容纳停靠面板，M为大于或等于1的整数；

控制模块，用于当检测到针对于第一停靠面板的拖动操作时，控制第一停靠面板按照拖动操作的触点轨迹进行移动；

显示模块，还用于当检测到拖动操作的触点位置位于第一停靠容器内时，显示针对于第一停靠容器的子容器定位器，其中，第一停靠容器的子容器定位器用于同步第一停靠面板位于第一停靠容器的预览效果，第一停靠容器属于M个停靠容器；

显示模块，还用于在拖动操作结束的情况下，若检测到拖动操作的触点结束位置位于第一停靠容器内，则在第一停靠容器内显示满足预览效果的第一停靠面板。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，第一停靠容器的子容器定位器显示于第一停靠容器内，且，第一停靠容器的子容器定位器包括上方控件、下方控件、左侧控件以及右侧控件；

显示模块，具体用于若检测到拖动操作的触点结束位置位于上方控件，则在第一停靠容器内创建第一子容器，并在第一子容器内显示满足预览效果的第一停靠面板，其中，第一子容器位于第一停靠容器的上方区域；

若检测到拖动操作的触点结束位置位于下方控件，则在第一停靠容器内创建第二子容器，并在第二子容器内显示满足预览效果的第一停靠面板，其中，第二子容器位于第一停靠容器的下方区域；

若检测到拖动操作的触点结束位置位于左侧控件，则在第一停靠容器内创建第三子容器，并在第三子容器内显示满足预览效果的第一停靠面板，其中，第三子容器位于第一停靠容器的左侧区域；

若检测到拖动操作的触点结束位置位于右侧控件，则在第一停靠容器内创建第四子容器，并在第四子容器内显示满足预览效果的第一停靠面板，其中，第四子容器位于第一停靠容器的右侧区域。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，

显示模块，具体用于若检测到拖动操作的触点结束位置位于第一停靠容器的上方区域，则在第一停靠容器内创建第一子容器，并在第一子容器内显示满足预览效果的第一停靠面板，其中，第一子容器位于上方区域；

若检测到拖动操作的触点结束位置位于第一停靠容器的下方区域，则在第一停靠容器内创建第二子容器，并在第二子容器内显示满足预览效果的第一停靠面板，其中，第二子容器位于下方区域；

若检测到拖动操作的触点结束位置位于第一停靠容器的左侧区域，则在第一停靠容器内创建第三子容器，并在第三子容器内显示满足预览效果的第一停靠面板，其中，第三子容器位于左侧区域；

若检测到拖动操作的触点结束位置位于第一停靠容器的右侧区域，则在第一停靠容器内创建第四子容器，并在第四子容器内显示满足预览效果的第一停靠面板，其中，第四子容器位于右侧区域。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，第一停靠容器的子容器定位器显示于第一停靠容器内，且，第一停靠容器的子容器定位器包括中心控件；

显示模块，具体用于若检测到拖动操作的触点结束位置位于中心控件，则在第一停靠容器内显示满足预览效果的所述第一停靠面板。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，

显示模块，具体用于若检测到拖动操作的触点结束位置位于第一停靠容器的中心区域，则在第一停靠容器的内显示满足预览效果的第一停靠面板。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，

显示模块，还用于当检测到针对于第一停靠容器对应分离器的拖动操作时，根据拖动操作的触点位置，显示第一停靠容器的尺寸变化预览效果，其中，分离器为垂直分离器或者水平分离器，垂直分离器用于调整停靠容器的宽度，水平分离器用于调整停靠容器的高度；

显示模块，还用于当检测到针对于第一停靠容器对应分离器的释放操作时，显示满足尺寸变化预览效果的第一停靠容器。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，

显示模块，还用于在第一停靠容器内显示第二停靠面板的情况下，响应针对于第二停靠面板的菜单查看操作，显示标签页菜单，其中，标签页菜单包括浮窗控件；

显示模块，还用于响应针对于浮窗控件的选择操作，在目标操作界面中显示处于悬浮状态的第一浮动容器，并在第一浮动容器内显示第二停靠面板。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，

显示模块，还用于在第一停靠容器内显示第二停靠面板的情况下，当检测到针对于第二停靠面板对应标签页的拖动操作时，根据拖动操作的触点位置，显示第一浮动容器的预览效果；

显示模块，还用于当检测到针对于第二停靠面板对应标签页的释放操作时，在目标操作界面中显示处于悬浮状态的第一浮动容器，并在第一浮动容器内显示第二停靠面板。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，

显示模块，还用于在目标操作界面中显示处于悬浮状态的第一浮动容器之后，响应针对于第一浮动容器对应最大化控件的选择操作，在目标操作界面中显示处于最大化状态的第一浮动容器；

显示模块，还用于在第一浮动容器处于最大化状态的情况下，响应针对于第一浮动容器对应还原控件的选择操作，在目标操作界面中显示处于悬浮状态的第一浮动容器。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，

显示模块，还用于在目标操作界面中显示处于悬浮状态的第一浮动容器，并在第一浮动容器内显示第二停靠面板；

控制模块，还用于当检测到针对于第一浮动容器的拖动操作时，控制第一浮动容器按照拖动操作的触点轨迹进行移动；

显示模块，还用于若检测到拖动操作的触点结束位置位于第一停靠容器对应的标签栈内，则将第一浮动容器合并至第一停靠容器，并在第一停靠容器对应的标签栈内显示第二停靠面板对应的标签页。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，

显示模块，还用于在第一停靠容器内显示满足预览效果的第一停靠面板之后，显示第一停靠容器对应的标签栈，其中，第一停靠容器对应的标签栈包括第一停靠面板对应的标签页；

显示模块，还用于在第一停靠容器内显示第二停靠面板的情况下，响应针对于第一停靠面板对应的标签页的选择操作，在第一停靠容器内将第二停靠面板切换显示为第一停靠面板。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，

显示模块，还用于在目标操作界面中显示至少两个浮动容器，其中，至少两个浮动容器包括第一浮动容器以及第二浮动容器；

显示模块，还用于若响应针对于第一浮动容器的选择操作，在目标操作界面中显示处于最顶层的第一浮动容器；

显示模块，还用于若响应针对于第二浮动容器的选择操作，在目标操作界面中显示处于最顶层的第二浮动容器。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，目标操作界面包括菜单控件；

显示模块，还用于响应针对于菜单控件的选择操作，显示上下文菜单，其中，上下文菜单包括重置布局控件；

显示模块，还用于响应针对于重置布局控件的选择操作，在目标操作界面中显示满足默认布局状态的N个停靠容器，其中，N为大于或等于1的整数。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，

显示模块，还用于响应针对于第一停靠面板的菜单查看操作，显示标签页菜单，其中，标签页菜单包括隐藏控件；

显示模块，还用于响应针对于隐藏控件的选择操作，在目标操作界面中取消显示第一停靠面板，并在目标操作界面中显示第一停靠面板对应的标签控件，其中，标签控件对应于标签信息，标签信息包括图标以及标题中的至少一项；

显示模块，还用于响应针对于第一停靠面板对应的标签控件的选择操作，在目标操作界面中显示第一停靠面板。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，目标操作界面包括菜单控件；

显示模块，还用于响应针对于菜单控件的选择操作，显示上下文菜单，其中，上下文菜单包括面板查看控件；

显示模块，还用于响应针对于面板查看控件的选择操作，在目标操作界面中显示停靠面板列表，其中，停靠面板列表用于提供在目标操作界面中的各个停靠面板。

在一种可能的设计中，在本申请实施例的另一方面的另一种实现方式中，操作界面交互装置还包括保存模块；

保存模块，用于响应针对于目标布局数据的保存操作，将目标布局数据保存至终端或者发送至服务器，以使服务器保存目标布局数据，其中，目标布局数据用于反映目标操作界面中各个停靠容器的布局情况；

显示模块，还用于当检测到针对于目标布局控件的选择操作时，根据目标布局控件所指示的布局数据，在目标操作界面中显示相应的布局内容。

本申请另一方面提供一种计算机设备，包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时实现上述各方面的方法。

本申请的另一方面提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述各方面的方法。

本申请的另一个方面，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现上述各方面的方法。

从以上技术方案可以看出，本申请实施例具有以下优点：

本申请实施例中，提供了一种操作界面的交互方法。首先，响应针对于目标地址信息的选择操作，在浏览器中显示目标操作界面。当检测到针对于第一停靠面板的拖动操作时，控制第一停靠面板按照拖动操作的触点轨迹进行移动。基于此，当检测到拖动操作的触点位置位于第一停靠容器内时，显示针对于第一停靠容器的子容器定位器，该第一停靠容器的子容器定位器用于同步第一停靠面板位于第一停靠容器的预览效果，在拖动操作结束的情况下，若检测到拖动操作的触点结束位置位于第一停靠容器内，则在第一停靠容器内显示满足预览效果的第一停靠面板。通过上述方式，设计了基于网页形式的软件开发平台，用户可以直接在浏览器提供的目标操作界面中进行交互操作。可见，一方面能够节省设备本地的存储资源，另一方面，无需等待客户端下载和更新的时间，从而节省时间成本。

附图说明

图1为本申请实施例中操作界面交互方法的一个实施环境示意图；

图2为本申请实施例中目标操作界面的一个示意图；

图3为本申请实施例中操作界面交互方法的一个流程示意图；

图4为本申请实施例中操作界面交互方法的一个类图示意图；

图5为本申请实施例中在停靠容器内显示停靠面板的一个示意图；

图6为本申请实施例中在停靠容器内显示停靠面板的另一个示意图；

图7为本申请实施例中在停靠容器内显示停靠面板的另一个示意图；

图8为本申请实施例中在停靠容器内显示停靠面板的另一个示意图；

图9为本申请实施例中在停靠容器内显示停靠面板的另一个示意图；

图10为本申请实施例中在停靠容器内显示停靠面板的另一个示意图；

图11为本申请实施例中在停靠容器内显示停靠面板的另一个示意图；

图12为本申请实施例中在停靠容器内显示停靠面板的另一个示意图；

图13为本申请实施例中在停靠容器内显示停靠面板的另一个示意图；

图14为本申请实施例中在停靠容器内显示停靠面板的另一个示意图；

图15为本申请实施例中对停靠容器进行尺寸调整的一个示意图；

图16为本申请实施例中将停靠面板切换为浮窗状态的一个示意图；

图17为本申请实施例中将停靠面板切换为浮窗状态的另一个示意图；

图18为本申请实施例中最大化第一浮动容器的一个示意图；

图19为本申请实施例中将标签页插入至标签栈的一个示意图；

图20为本申请实施例中切换停靠面板内容的一个示意图；

图21为本申请实施例中切换浮动容器显示状态的一个示意图；

图22为本申请实施例中切换至默认布局状态的一个示意图；

图23为本申请实施例中隐藏停靠容器的一个示意图；

图24为本申请实施例中提供停靠面板列表的一个示意图；

图25为本申请实施例中保存目标布局数据的一个示意图；

图26为本申请实施例中操作界面交互装置的一个示意图；

图27为本申请实施例中终端的一个结构示意图。

具体实施方式

本申请实施例提供了一种操作界面的交互方法、相关装置、设备以及存储介质。基于本申请提供的方法，一方面能够节省设备本地的存储资源，另一方面，无需等待客户端下载和更新的时间，从而节省时间成本。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“对应”于以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

开发平台是指以某种编程语言或者某几种编程语言为基础，开发出来的一个软件，而这软件不是一个最终的软件产品，它是一个二次开发软件框架，用户可以在这个产品上进行各种各样的软件产品的开发，并且在这个产品上进行开发的时候，不需要像以往的编程方式那样编写大量的代码，而是只需要进行一些简单的配置，或者是写极少量的代码便可以完成一个业务系统的开发工作。

如今，基于软件开发的场景(例如，HTML的开发场景，基于HTML开发本机程序的场景等)越来越复杂。而越复杂的交互，对于专业且统一的交互方案的需求也越大。统一的交互方案不仅能够避免用户因为重复学习带来的困扰，还可以让新手更容易上手。

基于此，本申请提出了一种应用于网页(web)的操作界面交互方法，即，提供了一种作为前端中间件的开发平台，面向用户界面(user interface，UI)设计师、web前端界面开发者和使用用户都具有一定提升效果。对于UI设计师而言，可以专注于具体面板内容的设计，不需要关心整体的布局界面。例如，在设计web完整性开发环境(web integritydevelop environment，WebIDE)的调试面板时，UI设计师可以专注于设计调试面板的具体功能，而不需要知道这个调试面板是放置在目标操作界面的那个位置。对于web前端界面开发者而言，只需要实现各个面板内容之间的交互。对于用户而言，可以根据自己喜好以及显示器的大小来动态调整布局，以适应使用界面。

可见，本申请提供的操作界面交互方法适用于专业软件的开发，例如，WebIDE、在线建模、在线图片编辑等专用软件。

本申请提供的方法可应用于图1所示的实施环境，该实施环境包括终端110和服务器120，且，终端110和服务器120之间通过通信网络130连接。其中，终端110和服务器120之间可以通过通信网络130进行通信。其中，通信网络130使用标准通信技术和/或协议，通常为因特网，但也可以是任何网络，包括但不限于蓝牙、局域网(local area network，LAN)、城域网(metropolitan area network，MAN)、广域网(wide area network，WAN)、移动、专用网络或者虚拟专用网络的任何组合)。在一些实施例中，可使用定制或专用数据通信技术取代或者补充上述数据通信技术。

本申请涉及的终端110包括但不限于手机、电脑、智能语音交互设备、智能家电、车载终端、飞行器等。其中，客户端部署于终端110上，客户端可以通过浏览器的形式运行于终端110上，也可以通过独立的APP的形式运行于终端110上等。本申请涉及的服务器120可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(content delivery network，CDN)、以及大数据和AI平台等基础云计算服务的云服务器。

结合上述实施环境，用户可通过终端110提供的浏览器输入目标地址信息。终端110通过通信网络130向服务器120发送目标地址信息。由此，服务器120响应于目标地址信息，并向终端110反馈目标操作界面上的元素。基于此，用户通过终端110进行页面交互，不同交互区域具有内聚的功能，可能在目标操作界面使用的不同阶段配置不同透视图。例如，WebIDE具有代码编写透视图，此时，在目标操作界面中可显示源代码窗格、资源面板、资源属性面板、编译面、调试透视图，单测用例面板、源代码窗格等。

鉴于本申请涉及到一些与专业领域相关的术语，为了便于理解，下面将结合图2所示的界面进行解释。请参阅图2，图2为本申请实施例中目标操作界面的一个示意图。

(1)停靠容器(docking container)：指在页面中的某个区域中，各个面板可以停靠在这个区域中的某个位置。示例性地，图2中A1所指示的为一个停靠容器。

(2)停靠面板(docking panel)：指可以被停靠在停靠容器的中的某个具体元素，当停靠容器的大小变化时，停靠面板的大小和位置会改变，但相对锚定位置不会改变。即，如果停靠面板在停靠容器的右侧，那么停靠容器调整大小后，停靠面板依然是停靠容器的右侧。示例性地，图2中A2所指示的为一个停靠面板。

(3)主文档窗格(main doc window)：用于容纳主要编辑面板的区域，通常是位于停靠容器的中间区域。其中，主文档窗格是由主文档窗格的标签栈和内容面板组成，点击标签栈中的标签页，可以切换到对应的内容面板的显示，同时，标签栈的右侧还有主文档下拉切换列表和选项上下文菜单。示例性地，图2中A3所指示的为一个主文档窗格。

(4)垂直分离器(vertical splitter)：用于容纳多个区域的容器，可以通过物体(例如，鼠标或手指等)拖拽调整各个区域的宽度。

(5)水平分离器(horizontal splitter)：用于容纳多个区域的容器，可以通过物体(例如，鼠标或手指等)拖拽调整各个区域的高度。

(6)标签栈(tab stack)：用于容纳多个区域的容器，可以通过标签页来切换当前显示的区域。示例性地，图2中A4所指示的为标签栈。

(7)自动隐藏放置点(auto hide docking site)：停靠面板可以自动隐藏到上下左右四个停靠放置点中，放置之后会出现标签控件，点击标签控件则可以在上下左右四个隐藏区域显示停靠面板的内容。当焦点离开时，停靠面板的内容会自动隐藏。示例性地，图2中A5所指示的为一个自动隐藏放置点。

(8)浮动窗格(floating window)：当通过标题栏或标签页拖放停靠面板时，停靠面板会浮动到停靠容器上方，浮动窗格可以自由调整大小位置和叠放层级。示例性地，图2中A6所指示的为浮动窗格。

(9)停靠容器定位器：当拖放标签页和标题栏时，进入布局调整状态，此时，会在停靠容器四边和指针悬停面板上显示停靠容器定位器。放置的指定区域会将拖放源面板移动到目标区域。

(10)布局(perspective)：停靠容器下所有的窗口和停靠面板的布局的集合。

(11)停靠管理器：专门负责布局的保存和恢复。当用户调整布局时，负责渲染布局的一个程序。

(12)分割器：是指可以进行左右大小调整或上下大小调整的拖放的控制条。

结合上述介绍，下面将对本申请中操作界面的交互方法进行介绍，请参阅图3，本申请实施例中操作界面的交互方法可以由终端独立完成，也可以由服务器独立完成，还可以由终端与服务器配合完成，本申请包括：

210、响应针对于目标地址信息的选择操作，在浏览器中显示目标操作界面，其中，目标地址信息用于加载目标操作界面，目标操作界面包括M个停靠容器以及至少一个停靠面板，停靠容器用于容纳停靠面板，M为大于或等于1的整数；

在一个或多个实施例中，示例性地，用户在浏览器提供的搜索栏中输入目标地址信息，以触发针对于目标地址信息的选择操作。示例性地，用户通过点击桌面快捷方式，直接进入目标地址信息对应的目标操作界面。示例性地，用户可从浏览器收藏夹中选择目标地址信息，以触发针对于目标地址信息的选择操作。

具体地，终端响应针对于目标地址信息的选择操作，并加载目标操作界面。由此，在浏览器中显示目标操作界面。其中，目标操作界面上显示M个停靠容器以及至少一个停靠面板，停靠容器用于容纳停靠面板。

220、当检测到针对于第一停靠面板的拖动操作时，控制第一停靠面板按照拖动操作的触点轨迹进行移动；

在一个或多个实施例中，以目标操作界面上显示的第一停靠面板为例，用户可以拖动该第一停靠面板。基于此，第一停靠面板所对应的轮廓按照用户拖动操作所对应的触点轨迹进行移动。此外，还可以显示停靠面板对应的预览区域。

230、当检测到拖动操作的触点位置位于第一停靠容器内时，显示针对于第一停靠容器的子容器定位器，其中，第一停靠容器的子容器定位器用于同步第一停靠面板位于第一停靠容器的预览效果，第一停靠容器属于M个停靠容器；

在一个或多个实施例中，以目标操作界面上显示的第一停靠容器为例，如果用户将拖动操作的触点位置位于第一停靠容器内，则会显示一个针对第一停靠容器的子容器定位器。其中，该子容器定位器能够同步第一停靠面板位于第一停靠容器的预览效果。

需要说明的是，第一停靠容器属于M个停靠容器中的任意一个停靠容器。

240、在拖动操作结束的情况下，若检测到拖动操作的触点结束位置位于第一停靠容器内，则在第一停靠容器内显示满足预览效果的第一停靠面板。

在一个或多个实施例中，在拖动操作结束的情况下，如果用户拖动操作的触点结束位置位于第一停靠容器内，则在第一停靠容器内显示第一停靠面板。此时，显示效果与子容器定位器对应的预览效果保持一致。触点结束位置表示拖动操作结束时，触点所在的位置。

具体地，为了便于理解，请参阅图4，图4为本申请实施例中操作界面交互方法的一个类图示意图，如图所示，图中包括多个类，每个类具有相应的颜色。各个类具有相应的颜色。白色表示展示模型视图的组件，浅灰色表示控制行为的控制器。深灰色表示示模型数据。其中，模型数据可以被持久化(例如保存到远端或本地存储中)。图中实心菱形箭头表示组合(composition)，用于表示个体与组成部分之间的关联关系。图中空心菱形箭头表示聚合(aggregation)，用于表示集体与个体之间的关联关系。图中空心三角形箭头表示继承(inheritance)，用于表示子类如何特化父类的所有特征和行为。

当创建面板容器时，会自动创建一个空白的主视图渲染模式。开发者可以手动设置布局模型，当布局模型更新时会同步保存到持久化设施中。当进入布局调整模式时，停靠管理器会创建一个布局调整控制器，用于记录拖放源和物体(例如，鼠标或手指等)悬停的目标，同时，界面将展示释放物体(例如，鼠标或手指等)后的新布局。当停靠面板是自动隐藏区域中的面板时，自动隐藏区域中的面板才会显示。当分割器或者标签栈只有一个子容器时，停靠容器会退化为面板类型。

本申请实施例中，提供了一种操作界面的交互方法。通过上述方式，设计了基于网页形式的软件开发平台，用户可以直接在浏览器提供的目标操作界面中进行交互操作。可见，一方面能够节省设备本地的存储资源，另一方面，无需等待客户端下载和更新的时间，从而节省时间成本。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，第一停靠容器的子容器定位器显示于第一停靠容器内，且，第一停靠容器的子容器定位器包括上方控件、下方控件、左侧控件以及右侧控件；

若检测到拖动操作的触点结束位置位于第一停靠容器内，则在第一停靠容器内显示满足预览效果的第一停靠面板，具体可以包括：

若检测到拖动操作的触点结束位置位于上方控件，则在第一停靠容器内创建第一子容器，并在第一子容器内显示满足预览效果的第一停靠面板，其中，第一子容器位于第一停靠容器的上方区域；

若检测到拖动操作的触点结束位置位于下方控件，则在第一停靠容器内创建第二子容器，并在第二子容器内显示满足预览效果的第一停靠面板，其中，第二子容器位于第一停靠容器的下方区域；

若检测到拖动操作的触点结束位置位于左侧控件，则在第一停靠容器内创建第三子容器，并在第三子容器内显示满足预览效果的第一停靠面板，其中，第三子容器位于第一停靠容器的左侧区域；

若检测到拖动操作的触点结束位置位于右侧控件，则在第一停靠容器内创建第四子容器，并在第四子容器内显示满足预览效果的第一停靠面板，其中，第四子容器位于第一停靠容器的右侧区域。

在一个或多个实施例中，介绍了一种在停靠容器一侧显示停靠面板的方式。由前述实施例可知，停靠容器上下左右4个边缘可显示停靠容器定位器，当物体(例如，鼠标或手指等)放置到这四个停靠容器定位器时，会将拖放源容器移动到最外层的容器区域内。下面将结合图示，介绍第一停靠面板停靠于第一停靠容器的情况。

示例性地，请参阅图5，图5为本申请实施例中在停靠容器内显示停靠面板的一个示意图，如图5中(A)图所示，B1用于指示第一停靠面板。B2用于指示停靠容器定位器。当检测到针对于第一停靠面板的拖动操作时，显示如B3所指示的悬停面板。如图5中(B)图所示，B4用于指示第一停靠容器。B5用于指示针对第一停靠容器的子容器定位器。B51用于指示上方控件。可见，当拖动操作的触点位置位于上方控件时，显示如B6所指示的预览效果。基于此，当拖动操作的触点结束位置位于上方控件时，在第一停靠容器内创建第一子容器，并在第一子容器内显示第一停靠面板。其中，第一子容器所在区域即为B6所指示的区域，即，第一子容器位于第一停靠容器的上方区域。

示例性地，请参阅图6，图6为本申请实施例中在停靠容器内显示停靠面板的另一个示意图，如图6中(A)图所示，B1用于指示第一停靠面板。B2用于指示停靠容器定位器。当检测到针对于第一停靠面板的拖动操作时，显示如B3所指示的悬停面板。如图6中(B)图所示，B4用于指示第一停靠容器。B5用于指示针对第一停靠容器的子容器定位器。B52用于指示下方控件。可见，当拖动操作的触点位置位于下方控件时，显示如B7所指示的预览效果。基于此，当拖动操作的触点结束位置位于下方控件时，在第一停靠容器内创建第二子容器，并在第二子容器内显示第一停靠面板。其中，第二子容器所在区域即为B7所指示的区域，即，第二子容器位于第一停靠容器的下方区域。

示例性地，请参阅图7，图7为本申请实施例中在停靠容器内显示停靠面板的另一个示意图，如图7中(A)图所示，B1用于指示第一停靠面板。B2用于指示停靠容器定位器。当检测到针对于第一停靠面板的拖动操作时，显示如B3所指示的悬停面板。如图7中(B)图所示，B4用于指示第一停靠容器。B5用于指示针对第一停靠容器的子容器定位器。B53用于指示左侧控件。可见，当拖动操作的触点位置位于左侧控件时，显示如B8所指示的预览效果。基于此，当拖动操作的触点结束位置位于左侧控件时，在第一停靠容器内创建第三子容器，并在第三子容器内显示第一停靠面板。其中，第三子容器所在区域即为B8所指示的区域，即，第三子容器位于第一停靠容器的左侧区域。

示例性地，请参阅图8，图8为本申请实施例中在停靠容器内显示停靠面板的另一个示意图，如图8中(A)图所示，B1用于指示第一停靠面板。B2用于指示停靠容器定位器。当检测到针对于第一停靠面板的拖动操作时，显示如B3所指示的悬停面板。如图8中(B)图所示，B4用于指示第一停靠容器。B5用于指示针对第一停靠容器的子容器定位器。B54用于指示右侧控件。可见，当拖动操作的触点位置位于右侧控件时，显示如B9所指示的预览效果。基于此，当拖动操作的触点结束位置位于右侧控件时，在第一停靠容器内创建第四子容器，并在第四子容器内显示第一停靠面板。其中，第四子容器所在区域即为B9所指示的区域，即，第四子容器位于第一停靠容器的右侧区域。

可以理解的是，当触点移动至停靠容器所在的区域内时，会在该停靠容器中显示子容器定位器。当触点放置到子容器定位器中的方位控件上时，会将拖放源容器放置到子容器的相对位置中。

其次，本申请实施例中，提供了一种在停靠容器一侧显示停靠面板的方式。通过上述方式，用户与子容器定位器中的控件进行交互，以达到在停靠容器中放置停靠面板的目的，从而增加交互的灵活性和可操作性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，若检测到拖动操作的触点结束位置位于第一停靠容器内，则在第一停靠容器内显示满足预览效果的第一停靠面板，具体可以包括：

若检测到拖动操作的触点结束位置位于第一停靠容器的上方区域，则在第一停靠容器内创建第一子容器，并在第一子容器内显示满足预览效果的第一停靠面板，其中，第一子容器位于上方区域；

若检测到拖动操作的触点结束位置位于第一停靠容器的下方区域，则在第一停靠容器内创建第二子容器，并在第二子容器内显示满足预览效果的第一停靠面板，其中，第二子容器位于下方区域；

若检测到拖动操作的触点结束位置位于第一停靠容器的左侧区域，则在第一停靠容器内创建第三子容器，并在第三子容器内显示满足预览效果的第一停靠面板，其中，第三子容器位于左侧区域；

若检测到拖动操作的触点结束位置位于第一停靠容器的右侧区域，则在第一停靠容器内创建第四子容器，并在第四子容器内显示满足预览效果的第一停靠面板，其中，第四子容器位于右侧区域。

在一个或多个实施例中，介绍了另一种在停靠容器一侧显示停靠面板的方式。由前述实施例可知，停靠容器上下左右4个边缘可显示停靠容器定位器，当物体(例如，鼠标或手指等)放置到这四个停靠容器定位器时，会将拖放源容器移动到最外层的容器区域内。下面将结合图示，介绍第一停靠面板停靠于第一停靠容器的情况。

示例性地，请参阅图9，图9为本申请实施例中在停靠容器内显示停靠面板的另一个示意图，如图9中(A)图所示，C1用于指示第一停靠面板。C2用于指示停靠容器定位器。当检测到针对于第一停靠面板的拖动操作时，显示如C3所指示的悬停面板。如图9中(B)图所示，C4用于指示第一停靠容器。C5用于指示针对第一停靠容器的子容器定位器。可见，当拖动操作的触点位置位于第一停靠容器的上方区域时，会点亮C51所指示的上方控件，并显示如C6所指示的预览效果。基于此，当拖动操作的触点结束位置位于第一停靠容器的上方区域时，在第一停靠容器内创建第一子容器，并在第一子容器内显示第一停靠面板。其中，第一子容器所在区域即为C6所指示的区域。

示例性地，请参阅图10，图10为本申请实施例中在停靠容器内显示停靠面板的另一个示意图，如图10中(A)图所示，C1用于指示第一停靠面板。C2用于指示停靠容器定位器。当检测到针对于第一停靠面板的拖动操作时，显示如C3所指示的悬停面板。如图10中(B)图所示，C4用于指示第一停靠容器。C5用于指示针对第一停靠容器的子容器定位器。可见，当拖动操作的触点位置位于第一停靠容器的下方区域时，会点亮C52所指示的下方控件，并显示如C7所指示的预览效果。基于此，当拖动操作的触点结束位置位于第一停靠容器的下方区域时，在第一停靠容器内创建第二子容器，并在第二子容器内显示第一停靠面板。其中，第二子容器所在区域即为C7所指示的区域。

示例性地，请参阅图11，图11为本申请实施例中在停靠容器内显示停靠面板的另一个示意图，如图11中(A)图所示，C1用于指示第一停靠面板。C2用于指示停靠容器定位器。当检测到针对于第一停靠面板的拖动操作时，显示如C3所指示的悬停面板。如图11中(B)图所示，C4用于指示第一停靠容器。C5用于指示针对第一停靠容器的子容器定位器。可见，当拖动操作的触点位置位于第一停靠容器的左侧区域时，会点亮C53所指示的左侧控件，并显示如C8所指示的预览效果。基于此，当拖动操作的触点结束位置位于第一停靠容器的左侧区域时，在第一停靠容器内创建第三子容器，并在第三子容器内显示第一停靠面板。其中，第三子容器所在区域即为C8所指示的区域。

示例性地，请参阅图12，图12为本申请实施例中在停靠容器内显示停靠面板的另一个示意图，如图12中(A)图所示，C1用于指示第一停靠面板。C2用于指示停靠容器定位器。当检测到针对于第一停靠面板的拖动操作时，显示如C3所指示的悬停面板。如图12中(B)图所示，C4用于指示第一停靠容器。C5用于指示针对第一停靠容器的子容器定位器。可见，当拖动操作的触点位置位于第一停靠容器的右侧区域时，会点亮C54所指示的右侧控件，并显示如C9所指示的预览效果。基于此，当拖动操作的触点结束位置位于第一停靠容器的右侧区域时，在第一停靠容器内创建第四子容器，并在第四子容器内显示第一停靠面板。其中，第四子容器所在区域即为C9所指示的区域。

需要说明的是，上方区域可以是停靠容器的靠上三分之一的区域。下方区域可以是停靠容器的靠下三分之一的区域。左侧区域可以是停靠容器的靠左三分之一的区域。右侧区域可以是停靠容器的靠右三分之一的区域。上述区域定义仅为一个示意，在实际应用中，可对各个区域的范围进行调整。

其次，本申请实施例中，提供了另一种在停靠容器一侧显示停靠面板的方式。通过上述方式，用户可直接将停靠面板拖动至停靠容器中的某个方位，以达到在停靠容器中放置停靠面板的目的，从而增加交互的灵活性和可操作性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，第一停靠容器的子容器定位器显示于第一停靠容器内，且，第一停靠容器的子容器定位器包括中心控件；

若检测到拖动操作的触点结束位置位于第一停靠容器内，则在第一停靠容器内显示满足预览效果的第一停靠面板，具体可以包括：

若检测到拖动操作的触点结束位置位于中心控件，则在第一停靠容器内显示满足预览效果的所述第一停靠面板。

在一个或多个实施例中，介绍了一种在停靠容器中显示面板的方式。由前述实施例可知，停靠容器上下左右4个边缘可显示停靠容器定位器，当物体(例如，鼠标或手指等)放置到这四个停靠容器定位器时，会将拖放源容器移动到最外层的容器区域内。下面将结合图示，介绍第一停靠面板停靠于第一停靠容器的情况。

具体地，请参阅图13，图13为本申请实施例中在停靠容器内显示停靠面板的另一个示意图，如图13中(A)图所示，D1用于指示第一停靠面板。当检测到针对于第一停靠面板的拖动操作时，显示如D2所指示的悬停面板。如图13中(B)图所示，D3用于指示第一停靠容器。D4用于指示针对第一停靠容器的子容器定位器。D41用于指示中心控件。可见，当拖动操作的触点位置位于中心控件时，显示铺满整个第一停靠容器的预览效果。基于此，当拖动操作的触点结束位置位于中心控件时，在第一停靠容器的整个区域内显示第一停靠面板。

可以理解的是，当触点移动至停靠容器所在的区域内时，会在该停靠容器中显示子容器定位器。当触点放置到子容器定位器中的中心控件上时，将目标容器合并至源容器中，并将源容器合并到标签栈中。

其次，本申请实施例中，提供了一种在停靠容器中显示面板的方式。通过上述方式，用户与子容器定位器中的控件进行交互，以达到在停靠容器中放置停靠面板的目的，从而增加交互的灵活性和可操作性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，若检测到拖动操作的触点结束位置位于第一停靠容器内，则在第一停靠容器内显示满足预览效果的第一停靠面板，具体可以包括：

若检测到拖动操作的触点结束位置位于第一停靠容器的中心区域，则在第一停靠容器的内显示满足预览效果的第一停靠面板。

在一个或多个实施例中，介绍了另一种在停靠容器一侧显示停靠面板的方式。由前述实施例可知，停靠容器上下左右4个边缘可显示停靠容器定位器，当物体(例如，鼠标或手指等)放置到这四个停靠容器定位器时，会将拖放源容器移动到最外层的容器区域内。下面将结合图示，介绍第一停靠面板停靠于第一停靠容器的情况。

具体地，请参阅图14，图14为本申请实施例中在停靠容器内显示停靠面板的另一个示意图，如图14中(A)图所示，E1用于指示第一停靠面板。当检测到针对于第一停靠面板的拖动操作时，显示如E2所指示的悬停面板。如图14中(B)图所示，E3用于指示第一停靠容器。E4用于指示针对第一停靠容器的子容器定位器。可见，当拖动操作的触点位置位于第一停靠容器的中间区域时，会点亮E41所指示的中心控件，并显示铺满整个第一停靠容器的预览效果。基于此，当拖动操作的触点结束位置位于第一停靠容器的中间区域时，在第一停靠容器的整个区域内显示第一停靠面板。

需要说明的是，中间区域可以是停靠容器中除去上方区域、下方区域、左侧区域和右侧区域之后剩下的区域。

其次，本申请实施例中，提供了另一种在停靠容器一侧显示停靠面板的方式。通过上述方式，用户可直接将停靠面板拖动至停靠容器中的中间区域，以达到在停靠容器中放置停靠面板的目的，从而增加交互的灵活性和可操作性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，还可以包括：

当检测到针对于第一停靠容器对应分离器的拖动操作时，根据拖动操作的触点位置，显示第一停靠容器的尺寸变化预览效果，其中，分离器为垂直分离器或者水平分离器，垂直分离器用于调整停靠容器的宽度，水平分离器用于调整停靠容器的高度；

当检测到针对于第一停靠容器对应分离器的释放操作时，显示满足尺寸变化预览效果的第一停靠容器。

在一个或多个实施例中，介绍了一种基于分离器调整停靠容器尺寸的方式。由前述实施例可知，目标操作界面上显示的停靠容器支持用户手动调整尺寸大小，以满足用户需求。下面将以第一停靠容器为例进行说明。

具体地，请参阅图15，图15为本申请实施例中对停靠容器进行尺寸调整的一个示意图，如图15中(A)图所示，F1用于指示第一停靠容器对应的垂直分离器。当物体(例如，鼠标或手指等)移动到垂直分离器时，指针会呈现如F2所指示的宽度调整状态。基于此，用户可拖动垂直分离器，并同步显示第一停靠容器的尺寸变化预览效果。当停止拖动操作时，调整第一停靠容器的宽度，即，显示满足尺寸变化预览效果的第一停靠容器。

如图15中(B)图所示，F3用于指示第一停靠容器对应的水平分离器。当物体(例如，鼠标或手指等)移动到水平分离器时，指针会呈现如F4所指示的高度调整状态。基于此，用户可拖动水平分离器，并同步显示第一停靠容器的尺寸变化预览效果。当停止拖动操作时，调整第一停靠容器的高度，即，显示满足尺寸变化预览效果的第一停靠容器。

其次，本申请实施例中，提供了一种基于分离器调整停靠容器尺寸的方式。通过上述方式，用户可以根据实际需求调整停靠容器的尺寸大小，从而增加操作的灵活性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，还可以包括：

在第一停靠容器内显示第二停靠面板的情况下，响应针对于第二停靠面板的菜单查看操作，显示标签页菜单，其中，标签页菜单包括浮窗控件；

响应针对于浮窗控件的选择操作，在目标操作界面中显示处于悬浮状态的第一浮动容器，并在第一浮动容器内显示第二停靠面板。

在一个或多个实施例中，介绍了一种将停靠面板切换为浮窗状态的方式。由前述实施例可知，用户可以将停靠容器中的停靠面板设置为浮动状态，即，创建一个处于浮动状态的容器，用于容纳停靠面板的内容。下面将以第一停靠面板为例进行说明。

具体地，为了便于理解，请参阅图16，图16为本申请实施例中将停靠面板切换为浮窗状态的一个示意图，如图16中(A)图所示，G1用于指示第一停靠容器中的第二停靠面板，其中，“BBB”所对应的停靠面板作为第二停靠面板。当用户点击G2所指示的菜单控件时，即触发针对于第二停靠面板的菜单查看操作，由此，显示如G3所示的标签页菜单。其中，G4用于指示标签页菜单中的浮窗控件。当用户点击G4所指示的浮窗控件时，即，触发针对于浮窗控件的选择操作。由此，如图16中(B)图所示，在目标操作界面中显示G5所指示的第一浮动容器，且，该第一浮动容器处于悬浮状态。此时，在第一浮动容器内显示“BBB”所对应的停靠面板(即，显示第二停靠面板)。

需要说明的是，浮动窗口可以重新通过布局调整状态回到停靠状态或自动隐藏状态。如果不将目标容器放置到子容器定位器中，则目标容器呈现悬浮状态。如果在拖动过程中，按下某个特定按键(例如，“esc”键)，则会取消布局调整模式，并恢复到拖动前的布局。

其次，本申请实施例中，提供了一种将停靠面板切换为浮窗状态的方式。通过上述方式，利用浮窗布局能够方便用户移动和调整窗口，以适应于开发需求，提升交互操作的便利性和灵活性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，还可以包括：

在第一停靠容器内显示第二停靠面板的情况下，当检测到针对于第二停靠面板对应标签页的拖动操作时，根据拖动操作的触点位置，显示第一浮动容器的预览效果；

当检测到针对于第二停靠面板对应标签页的释放操作时，在目标操作界面中显示处于悬浮状态的第一浮动容器，并在第一浮动容器内显示第二停靠面板。

在一个或多个实施例中，介绍了另一种将停靠容器切换为浮窗状态的方式。由前述实施例可知，用户可以将停靠容器中的停靠面板设置为浮动状态，即，创建一个处于浮动状态的容器，用于容纳停靠面板的内容。下面将以第一停靠容器为例进行说明。

具体地，为了便于理解，请参阅图17，图17为本申请实施例中将停靠面板切换为浮窗状态的另一个示意图，如图17中(A)图所示，H1用于指示第一停靠容器中的第二停靠面板，其中，“BBB”所对应的停靠面板作为第二停靠面板。H2用于指示第二停靠面板对应标签页。当用户使用物体(例如，鼠标或手指等)拖动H2所指示的标签页时，即，触发针对于第二停靠面板对应标签页的拖动操作，并根据拖动操作的触点位置，显示第一浮动容器的预览效果。其中，第一浮动容器的预览效果可表示为一个阴影区域，或者，可表示为一个轮廓等，此处不做限定。

用户将H2所指示的标签页拖动到某个位置之后，可释放物体(例如，鼠标或手指等)，由此，如图17中(B)图所示，在目标操作界面中显示H3所指示的第一浮动容器，且，该第一浮动容器处于悬浮状态。此时，在第一浮动容器内显示“BBB”所对应的停靠面板(即，显示第二停靠面板)。

需要说明的是，浮动窗口可以重新通过布局调整状态回到停靠状态或自动隐藏状态。如果不将目标容器放置到子容器定位器中，则目标容器呈现悬浮状态。如果在拖动过程中，按下某个特定按键(例如，“esc”键)，则会取消布局调整模式，并恢复到拖动前的布局。

其次，本申请实施例中，提供了另一种将停靠容器切换为浮窗状态的方式。通过上述方式，利用浮窗布局能够方便用户移动和调整窗口，以适应于开发需求，提升交互操作的便利性和灵活性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，在目标操作界面中显示处于悬浮状态的第一浮动容器之后，还可以包括：

响应针对于第一浮动容器对应最大化控件的选择操作，在目标操作界面中显示处于最大化状态的第一浮动容器；

还可以包括：

在第一浮动容器处于最大化状态的情况下，响应针对于第一浮动容器对应还原控件的选择操作，

在目标操作界面中显示处于悬浮状态的第一浮动容器。

在一个或多个实施例中，介绍了一种将浮动容器的最大化的方式。由前述实施例可知，用户可以对第一浮动容器进行最大化处理，使第一浮动容器能够铺满浏览器。

具体地，为了便于理解，请参阅图18，图18为本申请实施例中最大化第一浮动容器的一个示意图，如图18中(A)图所示，I1用于指示第一浮动容器。I2用于指示第一浮动容器对应的最大化控件。当用户点击I2所指示的最大化控件时，即，触发针对于第一浮动容器对应最大化控件的选择操作。由此，如图18中(B)图所示，在目标操作界面中显示I3所指示的处于最大化状态的第一浮动容器。I4用于指示还原控件。当用户点击I4所指示的还原控件时，即，触发针对于第一浮动容器对应还原控件的选择操作。由此，显示如图18中(A)图所示的界面。

再次，本申请实施例中，提供了一种将浮动容器的最大化的方式。通过上述方式，用户可以将处于悬浮状态的停靠容器进行最大化处理，由此，便于用户在目标操作界面对停靠容器中显示的面板内容进行处理，从而提升操作的便利性和灵活性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，还可以包括：

在目标操作界面中显示处于悬浮状态的第一浮动容器，并在第一浮动容器内显示第二停靠面板；

当检测到针对于第一浮动容器的拖动操作时，控制第一浮动容器按照拖动操作的触点轨迹进行移动；

若检测到拖动操作的触点结束位置位于第一停靠容器对应的标签栈内，则将第一浮动容器合并至第一停靠容器，并在第一停靠容器对应的标签栈内显示第二停靠面板对应的标签页。

在一个或多个实施例中，介绍了一种将标签页插入标签栈的方式。由前述实施例可知，用户在拖放面板标题栏或标签页时会使得停靠容器处于布局调整模式。如果将浮动容器拖动到标签栈，则预览区域会变成拖放到指定的标签页位置，由此，使浮动容器固定在目标操作界面中的某个固定区域。下面将以第一浮动容器为例进行说明。

具体地，为了便于理解，请参阅图19，图19为本申请实施例中将标签页插入至标签栈的一个示意图，如图19中(A)图所示，J1用于指示第一浮动容器，在第一浮动容器内显示“BBB”所对应的停靠面板(即，显示第二停靠面板的内容)。J2用于指示第一停靠容器对应的标签栈。当用户使用物体(例如，鼠标或手指等)拖动J1所指示的第一浮动容器时，控制第一浮动容器按照拖动操作的触点轨迹进行移动。

当拖动操作的触点结束位置位于J2所指示的标签栈内时，显示如图19中(B)图所示的目标操作界面。其中，J3用于指示第二停靠面板对应的标签页。此时，将第一浮动容器合并至第一停靠容器，并在标签栈内显示J3所指示的标签页。

其次，本申请实施例中，提供了一种将标签页插入标签栈的方式。通过上述方式，用户可以将浮动容器拖动至某个停靠容器中，使其固定在目标操作界面中的某个固定区域，由此，提升操作的便利性和灵活性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，在第一停靠容器内显示满足预览效果的第一停靠面板之后，还可以包括：

显示第一停靠容器对应的标签栈，其中，第一停靠容器对应的标签栈包括第一停靠面板对应的标签页；

在第一停靠容器内显示第二停靠面板的情况下，响应针对于第一停靠面板对应的标签页的选择操作，在第一停靠容器内将第二停靠面板切换显示为第一停靠面板。

在一个或多个实施例中，介绍了一种在标签栈中切换标签页的方式。由前述实施例可知，停靠容器对应的标签栈中可显示多个标签页，且，每个标签页对应于一个停靠面板。基于此，用户可以通过选择标签页来切换停靠面板的内容。下面将以第一停靠容器为例进行说明。

具体地，为了便于理解，请参阅图20，图20为本申请实施例中切换停靠面板内容的一个示意图，如图20中(A)图所示，K1用于指示第一停靠容器。K2用于指示第一停靠容器对应的标签栈。K3用于指示第二停靠面板对应的标签页。K4用于指示第一停靠面板对应的标签页。此时，第一停靠容器内显示第二停靠面板的内容。当用户点击K4所指示的标签页时，即，触发针对于第一停靠面板对应的标签页的选择操作。由此，如图20中(B)图所示，可见，在第一停靠容器内将第二停靠面板切换显示为第一停靠面板。

其次，本申请实施例中，提供了一种在标签栈中切换标签页的方式。通过上述方式，用户可以根据需求选择不同标签页对应的停靠面板，从而达到灵活切换面板的效果，由此，提升操作的便利性和灵活性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，还可以包括：

在目标操作界面中显示至少两个浮动容器，其中，至少两个浮动容器包括第一浮动容器以及第二浮动容器；

若响应针对于第一浮动容器的选择操作，在目标操作界面中显示处于最顶层的第一浮动容器；

若响应针对于第二浮动容器的选择操作，在目标操作界面中显示处于最顶层的第二浮动容器。

在一个或多个实施例中，介绍了一种对浮动容器进行切换操作的方式。由前述实施例可知，用户可根据需求调整浮动容器的尺寸，调整浮动容器的位置，以及激活浮动容器等。基于此，被激活的浮动容器会调整到目标操作界面的最上方，并且其对应的标题栏可呈一种指定颜色(例如，橙色或者灰色等)。未被激活的浮动容器，其对应的标题栏可呈另一种指定颜色(例如，蓝色等)。

具体地，为了便于理解，请参阅图21，图21为本申请实施例中切换浮动容器显示状态的一个示意图，如图21中(A)图所示，L1用于指示第一浮动容器。L2用于指示第二浮动容器。在用户点击第一浮动容器的标题栏时，在目标操作界面中显示处于最顶层的第一浮动容器，且，第一浮动容器的标题栏可呈灰色。在用户点击第二浮动容器的标题栏时，显示如图21中(B)图所示的目标操作界面。由此，在目标操作界面中显示处于最顶层的第二浮动容器，且，第二浮动容器的标题栏可呈灰色。

需要说明的是，停靠面板也具有激活状态和非激活状态。即，被激活的停靠面板，其对应的标题栏可呈一种指定颜色(例如，橙色或者灰色等)。未被激活的停靠面板，其对应的标题栏可呈另一种指定颜色(例如，蓝色等)。

其次，本申请实施例中，提供了一种对浮动容器进行切换操作的方式。通过上述方式，用户可以根据需求将浮动容器切换至界面的最前端，从而便于查看和操作。由此，提升操作的便利性和灵活性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，目标操作界面包括菜单控件；

还可以包括：

响应针对于菜单控件的选择操作，显示上下文菜单，其中，上下文菜单包括重置布局控件；

响应针对于重置布局控件的选择操作，在目标操作界面中显示满足默认布局状态的N个停靠容器，其中，N为大于或等于1的整数。

在一个或多个实施例中，介绍了一种恢复到默认容器布局的方式。由前述实施例可知，在上下文菜单中显示重置布局和其他非主文档面板的列表。当选择重置布局控件时，会将各个停靠面板的布局恢复到初始状态。

具体地，为了便于理解，请参阅图22，图22为本申请实施例中切换至默认布局状态的一个示意图，如图22中(A)图所示，M1用于指示菜单控件。当用户点击M1所指示的菜单控件时，即，触发针对于菜单控件的选择操作。由此，显示M2所指示的上下文菜单，上下文菜单中包括M3所指示的重置布局控件。基于此，当用户点击M3所指示的重置布局控件时，即，触发针对于重置布局控件的选择操作。于是，显示如图22中(B)图所示的目标操作界面，此时，目标操作界面中显示满足默认布局状态的N个停靠容器。

需要说明的是，默认布局状态下的N个停靠容器是程序设计者预先设计好的。

其次，本申请实施例中，提供了一种恢复到默认容器布局的方式。通过上述方式，支持用户将目标操作界面切换至程序设计者提供的默认的布局，由此，便于用户重新构建所需的布局，从而提升操作的便利性和灵活性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，还可以包括：

响应针对于第一停靠面板的菜单查看操作，显示标签页菜单，其中，标签页菜单包括隐藏控件；

响应针对于隐藏控件的选择操作，在目标操作界面中取消显示第一停靠面板，并在目标操作界面中显示第一停靠面板对应的标签控件，其中，标签控件对应于标签信息，标签信息包括图标以及标题中的至少一项；

还可以包括：

响应针对于第一停靠面板对应的标签控件的选择操作，在目标操作界面中显示第一停靠面板。

在一个或多个实施例中，介绍了一种隐藏停靠容器的方式。由前述实施例可知，停靠面板可以自动隐藏到停靠放置点中，放置之后会出现标签控件，标签控件上显示标签信息(即，标签信息包括图标以及标题中的至少一项)。当选择隐藏面板时，会根据所在的分离器类型和相对于主文档的位置来选择合适的隐藏放置点(即，上下左右四个隐藏放置点)来放置。示例性地，用户可以直接点击面板标题栏中的快捷控件，或者，从标签页菜单中点击隐藏控件，以达到切换为隐藏面板或标签栈的目的。

具体地，为了便于理解，请参阅图23，图23为本申请实施例中隐藏停靠容器的一个示意图，如图23中(A)图所示，N1用于指示第一停靠容器中的第一停靠面板。其中，“方法列表”所对应的停靠面板作为第一停靠面板。当用户点击N2所指示的菜单控件时，即触发针对于第一停靠面板的菜单查看操作，由此，显示如N3所示的标签页菜单。其中，N4用于指示标签页菜单中的隐藏控件。当用户点击N4所指示的隐藏控件时，即，触发针对于隐藏控件的选择操作。由此，如图23中(B)图所示，其中，N5用于指示第一停靠面板对应的标签控件。此时，第一停靠面板已被隐藏。

当用户点击N5所指示的标签控件时，即触发针对于第一停靠面板对应标签控件的选择操作，由此，显示如图23中(A)图所示的界面。

可以理解的是，处于隐藏状态的面板只有在被激活时才会显示面板内容，当其他面板激活时，自动隐藏的面板将缩回到自动隐藏区域中，只显示标签控件(例如，面板对应的图标以及面板对应的标题中的至少一项)。

需要说明的是，当用户再次点击隐藏面板对应的标签控件时，将激活该面板并显示其面板内容。处于隐藏状态的面板被激活之后，可以通过拖动该面板的标题栏进行布局调整。

其次，本申请实施例中，提供了一种隐藏停靠容器的方式。通过上述方式，可以将停靠容器切换为隐藏状态，从而达到简化界面布局的效果，从而提升界面布局的灵活性和可操作性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，目标操作界面包括菜单控件；

还可以包括：

响应针对于菜单控件的选择操作，显示上下文菜单，其中，上下文菜单包括面板查看控件；

响应针对于面板查看控件的选择操作，在目标操作界面中显示停靠面板列表，其中，停靠面板列表用于提供在目标操作界面中的各个停靠面板。

在一个或多个实施例中，介绍了一种展示停靠面板列表的方式。由前述实施例可知，在上下文菜单中显示方法列表和其他非主文档面板的列表。当选择面板查看控件时，会提供一个完整的停靠面板列表，停靠面板列表内显示所有窗格和可显示的停靠面板，使得用户可以全览可用的操作区域。

具体地，为了便于理解，请参阅图24，图24为本申请实施例中提供停靠面板列表的一个示意图，如图24中(A)图所示，O1用于指示菜单控件。当用户点击O1所指示的菜单控件时，即，触发针对于菜单控件的选择操作。由此，显示O2所指示的上下文菜单，上下文菜单中包括O3所指示的面板查看控件。基于此，当用户点击O3所指示的面板查看控件时，即，触发针对于面板查看控件的选择操作。于是，显示如图24中(B)图所示的目标操作界面，其中，O4用于指示停靠面板列表，停靠面板列表用于提供在目标操作界面中的各个停靠面板。

其次，本申请实施例中，提供了一种展示停靠面板列表的方式。通过上述方式，停靠面板列表集中展示了当前界面内所有的面板信息，从而便于用户查看和调取面板。由此，提升操作的便利性和可操作性。

可选地，在上述图3对应的各个实施例的基础上，本申请实施例提供的另一个可选实施例中，还可以包括：

响应针对于目标布局数据的保存操作，将目标布局数据保存至终端或者发送至服务器，以使服务器保存目标布局数据，其中，目标布局数据用于反映目标操作界面中各个停靠容器的布局情况；

还可以包括：

当检测到针对于目标布局控件的选择操作时，根据目标布局控件所指示的布局数据，在目标操作界面中显示相应的布局内容。

在一个或多个实施例中，介绍了一种保存界面布局的方式。由前述实施例可知，对于复杂的界面布局还可以将布局数据保存到磁盘，保存到本地缓存，或者上传至服务器，以便于快速切换到此界面布局。软件开发方可以提供多个预设的布局(例如，设计布局、调试布局、性能检测布局等)，用户可自主选择其中一个布局进行展示。

具体地，为了便于理解，请参阅图25，图25为本申请实施例中保存目标布局数据的一个示意图，如图25中(A)图所示，P1用于指示保存控件。基于图25中(A)图所示的目标操作界面，可得到其对应的目标布局数据。其中，目标布局数据包括各个停靠容器的布局情况以及相关参数等。当用户点击P1所指示的保存控件时，即，触发针对于目标布局数据的保存操作。由此，生成一个新的布局设计，例如，“布局设计D”。并且将目标布局数据保存至终端或者发送至服务器进行保存。

P2用于指示目标布局控件，其中，该目标布局控件指示“布局设计A”所对应的布局控件。当用户点击P2所指示的目标布局控件时，即，触发针对于目标布局控件的选择操作。由此，显示如图25中(B)图所示的目标操作界面，此时，目标操作界面上显示“布局设计A”所对应的布局内容。

需要说明的是，除了支持用户保存布局数据，还可以加载和分享布局数据。

其次，本申请实施例中，提供了一种保存界面布局的方式。通过上述方式，用户可根据开发需求设计相应的界面布局，并保存该界面布局对应的目标布局数据。由此，便于用户快速切换至所需的界面布局，从而提升操作便利性。

下面对本申请中的操作界面交互装置进行详细描述，请参阅图26，图26为本申请实施例中操作界面交互装置的一个实施例示意图，操作界面交互装置30包括：

显示模块310，用于响应针对于目标地址信息的选择操作，在浏览器中显示目标操作界面，其中，目标地址信息用于加载目标操作界面，目标操作界面包括M个停靠容器以及至少一个停靠面板，停靠容器用于容纳停靠面板，M为大于或等于1的整数；

控制模块320，用于当检测到针对于第一停靠面板的拖动操作时，控制第一停靠面板按照拖动操作的触点轨迹进行移动；

显示模块310，还用于当检测到拖动操作的触点位置位于第一停靠容器内时，显示针对于第一停靠容器的子容器定位器，其中，第一停靠容器的子容器定位器用于同步第一停靠面板位于第一停靠容器的预览效果，第一停靠容器属于M个停靠容器；

显示模块310，还用于在拖动操作结束的情况下，若检测到拖动操作的触点结束位置位于第一停靠容器内，则在第一停靠容器内显示满足预览效果的第一停靠面板。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，设计了基于网页形式的软件开发平台，用户可以直接在浏览器提供的目标操作界面中进行交互操作。可见，一方面能够节省设备本地的存储资源，另一方面，无需等待客户端下载和更新的时间，从而节省时间成本。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，第一停靠容器的子容器定位器显示于第一停靠容器内，且，第一停靠容器的子容器定位器包括上方控件、下方控件、左侧控件以及右侧控件；

显示模块310，具体用于若检测到拖动操作的触点结束位置位于上方控件，则在第一停靠容器内创建第一子容器，并在第一子容器内显示满足预览效果的第一停靠面板，其中，第一子容器位于第一停靠容器的上方区域；

若检测到拖动操作的触点结束位置位于下方控件，则在第一停靠容器内创建第二子容器，并在第二子容器内显示满足预览效果的第一停靠面板，其中，第二子容器位于第一停靠容器的下方区域；

若检测到拖动操作的触点结束位置位于左侧控件，则在第一停靠容器内创建第三子容器，并在第三子容器内显示满足预览效果的第一停靠面板，其中，第三子容器位于第一停靠容器的左侧区域；

若检测到拖动操作的触点结束位置位于右侧控件，则在第一停靠容器内创建第四子容器，并在第四子容器内显示满足预览效果的第一停靠面板，其中，第四子容器位于第一停靠容器的右侧区域。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，用户与子容器定位器中的控件进行交互，以达到在停靠容器中放置停靠面板的目的，从而增加交互的灵活性和可操作性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，

显示模块310，具体用于若检测到拖动操作的触点结束位置位于第一停靠容器的上方区域，则在第一停靠容器内创建第一子容器，并在第一子容器内显示满足预览效果的第一停靠面板，其中，第一子容器位于上方区域；

若检测到拖动操作的触点结束位置位于第一停靠容器的下方区域，则在第一停靠容器内创建第二子容器，并在第二子容器内显示满足预览效果的第一停靠面板，其中，第二子容器位于下方区域；

若检测到拖动操作的触点结束位置位于第一停靠容器的左侧区域，则在第一停靠容器内创建第三子容器，并在第三子容器内显示满足预览效果的第一停靠面板，其中，第三子容器位于左侧区域；

若检测到拖动操作的触点结束位置位于第一停靠容器的右侧区域，则在第一停靠容器内创建第四子容器，并在第四子容器内显示满足预览效果的第一停靠面板，其中，第四子容器位于右侧区域。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，用户可直接将停靠面板拖动至停靠容器中的某个方位，以达到在停靠容器中放置停靠面板的目的，从而增加交互的灵活性和可操作性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，第一停靠容器的子容器定位器显示于第一停靠容器内，且，第一停靠容器的子容器定位器包括中心控件；

显示模块310，具体用于若检测到拖动操作的触点结束位置位于中心控件，则在第一停靠容器内显示满足预览效果的所述第一停靠面板。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，用户与子容器定位器中的控件进行交互，以达到在停靠容器中放置停靠面板的目的，从而增加交互的灵活性和可操作性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，

显示模块310，具体用于若检测到拖动操作的触点结束位置位于第一停靠容器的中心区域，则在第一停靠容器的内显示满足预览效果的第一停靠面板。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，用户可直接将停靠面板拖动至停靠容器中的中间区域，以达到在停靠容器中放置停靠面板的目的，从而增加交互的灵活性和可操作性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，

显示模块310，还用于当检测到针对于第一停靠容器对应分离器的拖动操作时，根据拖动操作的触点位置，显示第一停靠容器的尺寸变化预览效果，其中，分离器为垂直分离器或者水平分离器，垂直分离器用于调整停靠容器的宽度，水平分离器用于调整停靠容器的高度；

显示模块310，还用于当检测到针对于第一停靠容器对应分离器的释放操作时，显示满足尺寸变化预览效果的第一停靠容器。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，用户可以根据实际需求调整停靠容器的尺寸大小，从而增加操作的灵活性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，

显示模块310，还用于在第一停靠容器内显示第二停靠面板的情况下，响应针对于第二停靠面板的菜单查看操作，显示标签页菜单，其中，标签页菜单包括浮窗控件；

显示模块310，还用于响应针对于浮窗控件的选择操作，在目标操作界面中显示处于悬浮状态的第一浮动容器，并在第一浮动容器内显示第二停靠面板。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，利用浮窗布局能够方便用户移动和调整窗口，以适应于开发需求，提升交互操作的便利性和灵活性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，

显示模块310，还用于在第一停靠容器内显示第二停靠面板的情况下，当检测到针对于第二停靠面板对应标签页的拖动操作时，根据拖动操作的触点位置，显示第一浮动容器的预览效果；

显示模块310，还用于当检测到针对于第二停靠面板对应标签页的释放操作时，在目标操作界面中显示处于悬浮状态的第一浮动容器，并在第一浮动容器内显示第二停靠面板。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，利用浮窗布局能够方便用户移动和调整窗口，以适应于开发需求，提升交互操作的便利性和灵活性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，

显示模块310，还用于在目标操作界面中显示处于悬浮状态的第一浮动容器之后，响应针对于第一浮动容器对应最大化控件的选择操作，在目标操作界面中显示处于最大化状态的第一浮动容器；

显示模块310，还用于在第一浮动容器处于最大化状态的情况下，响应针对于第一浮动容器对应还原控件的选择操作，在目标操作界面中显示处于悬浮状态的第一浮动容器。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，用户可以将处于悬浮状态的停靠容器进行最大化处理，由此，便于用户在目标操作界面对停靠容器中显示的面板内容进行处理，从而提升操作的便利性和灵活性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，

显示模块310，还用于在目标操作界面中显示处于悬浮状态的第一浮动容器，并在第一浮动容器内显示第二停靠面板；

控制模块320，还用于当检测到针对于第一浮动容器的拖动操作时，控制第一浮动容器按照拖动操作的触点轨迹进行移动；

显示模块310，还用于若检测到拖动操作的触点结束位置位于第一停靠容器对应的标签栈内，则将第一浮动容器合并至第一停靠容器，并在第一停靠容器对应的标签栈内显示第二停靠面板对应的标签页。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，用户可以将浮动容器拖动至某个停靠容器中，使其固定在目标操作界面中的某个固定区域，由此，提升操作的便利性和灵活性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，

显示模块310，还用于在第一停靠容器内显示满足预览效果的第一停靠面板之后，显示第一停靠容器对应的标签栈，其中，第一停靠容器对应的标签栈包括第一停靠面板对应的标签页；

显示模块310，还用于在第一停靠容器内显示第二停靠面板的情况下，响应针对于第一停靠面板对应的标签页的选择操作，在第一停靠容器内将第二停靠面板切换显示为第一停靠面板。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，用户可以根据需求选择不同标签页对应的停靠面板，从而达到灵活切换面板的效果，由此，提升操作的便利性和灵活性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，

显示模块310，还用于在目标操作界面中显示至少两个浮动容器，其中，至少两个浮动容器包括第一浮动容器以及第二浮动容器；

显示模块310，还用于若响应针对于第一浮动容器的选择操作，在目标操作界面中显示处于最顶层的第一浮动容器；

显示模块310，还用于若响应针对于第二浮动容器的选择操作，在目标操作界面中显示处于最顶层的第二浮动容器。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，用户可以根据需求将浮动容器切换至界面的最前端，从而便于查看和操作。由此，提升操作的便利性和灵活性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，目标操作界面包括菜单控件；

显示模块310，还用于响应针对于菜单控件的选择操作，显示上下文菜单，其中，上下文菜单包括重置布局控件；

显示模块310，还用于响应针对于重置布局控件的选择操作，在目标操作界面中显示满足默认布局状态的N个停靠容器，其中，N为大于或等于1的整数。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，支持用户将目标操作界面切换至程序设计者提供的默认的布局，由此，便于用户重新构建所需的布局，从而提升操作的便利性和灵活性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，

显示模块310，还用于响应针对于第一停靠面板的菜单查看操作，显示标签页菜单，其中，标签页菜单包括隐藏控件；

显示模块310，还用于响应针对于隐藏控件的选择操作，在目标操作界面中取消显示第一停靠面板，并在目标操作界面中显示第一停靠面板对应的标签控件，其中，标签控件对应于标签信息，标签信息包括图标以及标题中的至少一项；

显示模块310，还用于响应针对于第一停靠面板对应的标签控件的选择操作，在目标操作界面中显示第一停靠面板。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，可以将停靠容器切换为隐藏状态，从而达到简化界面布局的效果，从而提升界面布局的灵活性和可操作性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，目标操作界面包括菜单控件；

显示模块310，还用于响应针对于菜单控件的选择操作，显示上下文菜单，其中，上下文菜单包括面板查看控件；

显示模块310，还用于响应针对于面板查看控件的选择操作，在目标操作界面中显示停靠面板列表，其中，停靠面板列表用于提供在目标操作界面中的各个停靠面板。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，停靠面板列表集中展示了当前界面内所有的面板信息，从而便于用户查看和调取面板。由此，提升操作的便利性和可操作性。

可选地，在上述图26所对应的实施例的基础上，本申请实施例提供的操作界面交互装置30的另一实施例中，操作界面交互装置还包括保存模块330；

保存模块330，用于响应针对于目标布局数据的保存操作，将目标布局数据保存至终端或者发送至服务器，以使服务器保存目标布局数据，其中，目标布局数据用于反映目标操作界面中各个停靠容器的布局情况；

显示模块310，还用于当检测到针对于目标布局控件的选择操作时，根据目标布局控件所指示的布局数据，在目标操作界面中显示相应的布局内容。

本申请实施例中，提供了一种操作界面交互装置。采用上述装置，用户可根据开发需求设计相应的界面布局，并保存该界面布局对应的目标布局数据。由此，便于用户快速切换至所需的界面布局，从而提升操作便利性。

本申请实施例还提供了一种终端，如图27所示，为了便于说明，仅示出了与本申请实施例相关的部分，具体技术细节未揭示的，请参照本申请实施例方法部分。在本申请实施例中，以终端为手机为例进行说明：

图27示出的是与本申请实施例提供的终端相关的手机的部分结构的框图。参考图27，手机包括：射频(radio frequency，RF)电路410、存储器420、输入单元430、显示单元440、传感器450、音频电路460、无线保真(wireless fidelity，WiFi)模块470、处理器480、以及电源490等部件。本领域技术人员可以理解，图27中示出的手机结构并不构成对手机的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图27对手机的各个构成部件进行具体的介绍：

RF电路410可用于收发信息或通话过程中，信号的接收和发送，特别地，将基站的下行信息接收后，给处理器480处理；另外，将设计上行的数据发送给基站。通常，RF电路410包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器(low noiseamplifier，LNA)、双工器等。此外，RF电路410还可以通过无线通信与网络和其他设备通信。上述无线通信可以使用任一通信标准或协议，包括但不限于全球移动通讯系统(globalsystem of mobile communication，GSM)、通用分组无线服务(general packet radioservice，GPRS)、码分多址(code division multiple access，CDMA)、宽带码分多址(wideband code division multiple access,WCDMA)、长期演进(long term evolution，LTE)、电子邮件、短消息服务(short messaging service，SMS)等。

存储器420可用于存储软件程序以及模块，处理器480通过运行存储在存储器420的软件程序以及模块，从而执行手机的各种功能应用以及数据处理。存储器420可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器420可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

输入单元430可用于接收输入的数字或字符信息，以及产生与手机的用户设置以及功能控制有关的键信号输入。具体地，输入单元430可包括触控面板431以及其他输入设备432。触控面板431，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板431上或在触控面板431附近的操作)，并根据预先设定的程式驱动相应的连接装置。可选的，触控面板431可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器480，并能接收处理器480发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板431。除了触控面板431，输入单元430还可以包括其他输入设备432。具体地，其他输入设备432可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、鼠标、操作杆等中的一种或多种。

显示单元440可用于显示由用户输入的信息或提供给用户的信息以及手机的各种菜单。显示单元440可包括显示面板441，可选的，可以采用液晶显示器(liquid crystaldisplay，LCD)、有机发光二极管(organic light-emitting diode，OLED)等形式来配置显示面板441。进一步的，触控面板431可覆盖显示面板441，当触控面板431检测到在其上或附近的触摸操作后，传送给处理器480以确定触摸事件的类型，随后处理器480根据触摸事件的类型在显示面板441上提供相应的视觉输出。虽然在图27中，触控面板431与显示面板441是作为两个独立的部件来实现手机的输入和输入功能，但是在某些实施例中，可以将触控面板431与显示面板441集成而实现手机的输入和输出功能。

手机还可包括至少一种传感器450，比如光传感器、运动传感器以及其他传感器。具体地，光传感器可包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板441的亮度，接近传感器可在手机移动到耳边时，关闭显示面板441和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别手机姿态的应用(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；至于手机还可配置的陀螺仪、气压计、湿度计、温度计、红外线传感器等其他传感器，在此不再赘述。

音频电路460、扬声器461，传声器462可提供用户与手机之间的音频接口。音频电路460可将接收到的音频数据转换后的电信号，传输到扬声器461，由扬声器461转换为声音信号输出；另一方面，传声器462将收集的声音信号转换为电信号，由音频电路460接收后转换为音频数据，再将音频数据输出处理器480处理后，经RF电路410以发送给比如另一手机，或者将音频数据输出至存储器420以便进一步处理。

WiFi属于短距离无线传输技术，手机通过WiFi模块470可以帮助用户收发电子邮件、浏览网页和访问流式媒体等，它为用户提供了无线的宽带互联网访问。虽然图27示出了WiFi模块470，但是可以理解的是，其并不属于手机的必须构成，完全可以根据需要在不改变发明的本质的范围内而省略。

处理器480是手机的控制中心，利用各种接口和线路连接整个手机的各个部分，通过运行或执行存储在存储器420内的软件程序和/或模块，以及调用存储在存储器420内的数据，执行手机的各种功能和处理数据。可选的，处理器480可包括一个或多个处理单元；可选的，处理器480可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器480中。

手机还包括给各个部件供电的电源490(比如电池)，可选的，电源可以通过电源管理系统与处理器480逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。

尽管未示出，手机还可以包括摄像头、蓝牙模块等，在此不再赘述。

上述实施例中由终端所执行的步骤可以基于该图27所示的终端结构。

本申请实施例中还提供一种计算机设备，包括存储器和处理器，存储器存储有计算机程序，该处理器执行计算机程序时，实现前述各个实施例描述方法的步骤。

本申请实施例中还提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现前述各个实施例描述方法的步骤。

本申请实施例中还提供一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时，实现前述各个实施例描述方法的步骤。

可以理解的是，在本申请的具体实施方式中，涉及到用户信息、操作数据、页面数据等相关的数据，当本申请以上实施例运用到具体产品或技术中时，需要获得用户许可或者同意，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是服务器或终端等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储计算机程序的介质。

以上所述，以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (20)

1.一种操作界面的交互方法，其特征在于，包括：

响应针对于目标地址信息的选择操作，在浏览器中显示目标操作界面，其中，所述目标地址信息用于加载所述目标操作界面，所述目标操作界面包括M个停靠容器以及至少一个停靠面板，所述停靠容器用于容纳所述停靠面板，所述M为大于或等于1的整数；

当检测到针对于第一停靠面板的拖动操作时，控制所述第一停靠面板按照所述拖动操作的触点轨迹进行移动；

当检测到所述拖动操作的触点位置位于第一停靠容器内时，显示针对于所述第一停靠容器的子容器定位器，其中，所述第一停靠容器的子容器定位器用于同步所述第一停靠面板位于所述第一停靠容器的预览效果，所述第一停靠容器属于所述M个停靠容器；

在所述拖动操作结束的情况下，若检测到所述拖动操作的触点结束位置位于所述第一停靠容器内，则在所述第一停靠容器内显示满足所述预览效果的所述第一停靠面板。

2.根据权利要求1所述的交互方法，其特征在于，所述第一停靠容器的子容器定位器显示于所述第一停靠容器内，且，所述第一停靠容器的子容器定位器包括上方控件、下方控件、左侧控件以及右侧控件；

所述若检测到所述拖动操作的触点结束位置位于所述第一停靠容器内，则在所述第一停靠容器内显示满足所述预览效果的所述第一停靠面板，包括：

若检测到所述拖动操作的触点结束位置位于所述上方控件，则在所述第一停靠容器内创建第一子容器，并在所述第一子容器内显示满足所述预览效果的所述第一停靠面板，其中，所述第一子容器位于所述第一停靠容器的上方区域；

若检测到所述拖动操作的触点结束位置位于所述下方控件，则在所述第一停靠容器内创建第二子容器，并在所述第二子容器内显示满足所述预览效果的所述第一停靠面板，其中，所述第二子容器位于所述第一停靠容器的下方区域；

若检测到所述拖动操作的触点结束位置位于所述左侧控件，则在所述第一停靠容器内创建第三子容器，并在所述第三子容器内显示满足所述预览效果的所述第一停靠面板，其中，所述第三子容器位于所述第一停靠容器的左侧区域；

若检测到所述拖动操作的触点结束位置位于所述右侧控件，则在所述第一停靠容器内创建第四子容器，并在所述第四子容器内显示满足所述预览效果的所述第一停靠面板，其中，所述第四子容器位于所述第一停靠容器的右侧区域。

3.根据权利要求1所述的交互方法，其特征在于，所述若检测到所述拖动操作的触点结束位置位于所述第一停靠容器内，则在所述第一停靠容器内显示满足所述预览效果的所述第一停靠面板，包括：

若检测到所述拖动操作的触点结束位置位于所述第一停靠容器的上方区域，则在所述第一停靠容器内创建第一子容器，并在所述第一子容器内显示满足所述预览效果的所述第一停靠面板，其中，所述第一子容器位于所述上方区域；

若检测到所述拖动操作的触点结束位置位于所述第一停靠容器的下方区域，则在所述第一停靠容器内创建第二子容器，并在所述第二子容器内显示满足所述预览效果的所述第一停靠面板，其中，所述第二子容器位于所述下方区域；

若检测到所述拖动操作的触点结束位置位于所述第一停靠容器的左侧区域，则在所述第一停靠容器内创建第三子容器，并在所述第三子容器内显示满足所述预览效果的所述第一停靠面板，其中，所述第三子容器位于所述左侧区域；

若检测到所述拖动操作的触点结束位置位于所述第一停靠容器的右侧区域，则在所述第一停靠容器内创建第四子容器，并在所述第四子容器内显示满足所述预览效果的所述第一停靠面板，其中，所述第四子容器位于所述右侧区域。

4.根据权利要求1所述的交互方法，其特征在于，所述第一停靠容器的子容器定位器显示于所述第一停靠容器内，且，所述第一停靠容器的子容器定位器包括中心控件；

所述若检测到所述拖动操作的触点结束位置位于所述第一停靠容器内，则在所述第一停靠容器内显示满足所述预览效果的所述第一停靠面板，包括：

若检测到所述拖动操作的触点结束位置位于所述中心控件，则在所述第一停靠容器内显示满足所述预览效果的所述第一停靠面板。

5.根据权利要求1所述的交互方法，其特征在于，所述若检测到所述拖动操作的触点结束位置位于所述第一停靠容器内，则在所述第一停靠容器内显示满足所述预览效果的所述第一停靠面板，包括：

若检测到所述拖动操作的触点结束位置位于所述第一停靠容器的中心区域，则在所述第一停靠容器的内显示满足所述预览效果的所述第一停靠面板。

6.根据权利要求1所述的交互方法，其特征在于，所述方法还包括：

当检测到针对于所述第一停靠容器对应分离器的拖动操作时，根据拖动操作的触点位置，显示所述第一停靠容器的尺寸变化预览效果，其中，所述分离器为垂直分离器或者水平分离器，所述垂直分离器用于调整所述停靠容器的宽度，所述水平分离器用于调整所述停靠容器的高度；

当检测到针对于所述第一停靠容器对应分离器的释放操作时，显示满足所述尺寸变化预览效果的所述第一停靠容器。

7.根据权利要求1所述的交互方法，其特征在于，所述方法还包括：

在所述第一停靠容器内显示第二停靠面板的情况下，响应针对于所述第二停靠面板的菜单查看操作，显示标签页菜单，其中，所述标签页菜单包括浮窗控件；

响应针对于所述浮窗控件的选择操作，在所述目标操作界面中显示处于悬浮状态的第一浮动容器，并在第一浮动容器内显示所述第二停靠面板。

8.根据权利要求1所述的交互方法，其特征在于，所述方法还包括：

在所述第一停靠容器内显示第二停靠面板的情况下，当检测到针对于所述第二停靠面板对应标签页的拖动操作时，根据拖动操作的触点位置，显示第一浮动容器的预览效果；

当检测到针对于所述第二停靠面板对应标签页的释放操作时，在所述目标操作界面中显示处于悬浮状态的所述第一浮动容器，并在所述第一浮动容器内显示所述第二停靠面板。

9.根据权利要求7或8所述的交互方法，其特征在于，所述在所述目标操作界面中显示处于悬浮状态的所述第一浮动容器之后，所述方法还包括：

响应针对于所述第一浮动容器对应最大化控件的选择操作，在所述目标操作界面中显示处于最大化状态的所述第一浮动容器；

所述方法还包括：

在所述第一浮动容器处于最大化状态的情况下，响应针对于所述第一浮动容器对应还原控件的选择操作，在所述目标操作界面中显示处于悬浮状态的所述第一浮动容器。

10.根据权利要求1所述的交互方法，其特征在于，所述方法还包括：

在所述目标操作界面中显示处于悬浮状态的第一浮动容器，并在所述第一浮动容器内显示所述第二停靠面板；

当检测到针对于所述第一浮动容器的拖动操作时，控制所述第一浮动容器按照拖动操作的触点轨迹进行移动；

若检测到拖动操作的触点结束位置位于所述第一停靠容器对应的标签栈内，则将所述第一浮动容器合并至所述第一停靠容器，并在所述第一停靠容器对应的标签栈内显示所述第二停靠面板对应的标签页。

11.根据权利要求1所述的交互方法，其特征在于，所述在所述第一停靠容器内显示满足所述预览效果的所述第一停靠面板之后，所述方法还包括：

显示所述第一停靠容器对应的标签栈，其中，所述第一停靠容器对应的标签栈包括所述第一停靠面板对应的标签页；

在所述第一停靠容器内显示第二停靠面板的情况下，响应针对于所述第一停靠面板对应的标签页的选择操作，在所述第一停靠容器内将所述第二停靠面板切换显示为所述第一停靠面板。

12.根据权利要求1所述的交互方法，其特征在于，所述方法还包括：

在所述目标操作界面中显示至少两个浮动容器，其中，所述至少两个浮动容器包括第一浮动容器以及第二浮动容器；

若响应针对于所述第一浮动容器的选择操作，在所述目标操作界面中显示处于最顶层的所述第一浮动容器；

若响应针对于所述第二浮动容器的选择操作，在所述目标操作界面中显示处于最顶层的所述第二浮动容器。

13.根据权利要求1所述的交互方法，其特征在于，所述目标操作界面包括菜单控件；

所述方法还包括：

响应针对于所述菜单控件的选择操作，显示上下文菜单，其中，所述上下文菜单包括重置布局控件；

响应针对于所述重置布局控件的选择操作，在所述目标操作界面中显示满足默认布局状态的N个停靠容器，其中，所述N为大于或等于1的整数。

14.根据权利要求1所述的交互方法，其特征在于，所述方法还包括：

响应针对于所述第一停靠面板的菜单查看操作，显示标签页菜单，其中，所述标签页菜单包括隐藏控件；

响应针对于所述隐藏控件的选择操作，在所述目标操作界面中取消显示所述第一停靠面板，并在所述目标操作界面中显示所述第一停靠面板对应的标签控件，其中，所述标签控件对应于标签信息，所述标签信息包括图标以及标题中的至少一项；

所述方法还包括：

响应针对于所述第一停靠面板对应的标签控件的选择操作，在所述目标操作界面中显示所述第一停靠面板。

15.根据权利要求1所述的交互方法，其特征在于，所述目标操作界面包括菜单控件；

所述方法还包括：

响应针对于所述菜单控件的选择操作，显示上下文菜单，其中，所述上下文菜单包括面板查看控件；

响应针对于所述面板查看控件的选择操作，在所述目标操作界面中显示停靠面板列表，其中，所述停靠面板列表用于提供在所述目标操作界面中的各个停靠面板。

16.根据权利要求1所述的交互方法，其特征在于，所述方法还包括：

响应针对于目标布局数据的保存操作，将所述目标布局数据保存至终端或者发送至服务器，以使所述服务器保存所述目标布局数据，其中，所述目标布局数据用于反映所述目标操作界面中各个停靠容器的布局情况；

所述方法还包括：

当检测到针对于目标布局控件的选择操作时，根据所述目标布局控件所指示的布局数据，在所述目标操作界面中显示相应的布局内容。

17.一种操作界面交互装置，其特征在于，包括：

显示模块，用于响应针对于目标地址信息的选择操作，在浏览器中显示目标操作界面，其中，所述目标地址信息用于加载所述目标操作界面，所述目标操作界面包括M个停靠容器以及至少一个停靠面板，所述停靠容器用于容纳所述停靠面板，所述M为大于或等于1的整数；

控制模块，用于当检测到针对于第一停靠面板的拖动操作时，控制所述第一停靠面板按照所述拖动操作的触点轨迹进行移动；

所述显示模块，还用于当检测到所述拖动操作的触点位置位于第一停靠容器内时，显示针对于所述第一停靠容器的子容器定位器，其中，所述第一停靠容器的子容器定位器用于同步所述第一停靠面板位于所述第一停靠容器的预览效果，所述第一停靠容器属于所述M个停靠容器；

所述显示模块，还用于在所述拖动操作结束的情况下，若检测到所述拖动操作的触点结束位置位于所述第一停靠容器内，则在所述第一停靠容器内显示满足所述预览效果的所述第一停靠面板。

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

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

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