CN115857743A - 一种组件展示方法、装置、设备和存储介质 - Google Patents

Abstract

本发明公开了一种组件展示方法、装置、设备和存储介质，该方法包括：当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标；根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件；基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；基于所述目标展示方式展示所述当前组件和/或所述目标组件。上述技术方案，在将当前组件拖拽至网络页面内任一位置处时，实现对当前组件的正常展示。

Description

一种组件展示方法、装置、设备和存储介质

技术领域

本发明实施例涉及计算机技术领域，尤其涉及一种组件展示方法、装置、设备和存储介质。

背景技术

随着互联网的发展，网络页面的应用日渐广泛。与此同时，网络页面也变得越来越丰富多样。传统的网络页面开发，开发人员需要多次与客户沟通，花费大量的时间才可开发出客户满意的网络页面，网络页面开发效率低且成本高。因此，基于可视化编辑器进行网络页面开发变得越来越普遍。网络页面可以包括多级窗口，实际网络页面开发时，需要将各窗口中的组件进行相互拖拽。

现有技术中，将窗口中的组件拖拽至下一级窗口的过程中，窗口可能无法接收到鼠标移动事件，将窗口中的组件拖拽至上一级窗口时，窗口无法接收到鼠标移动事件。因此，亟需一种组件展示方法，实现在拖拽组件后成功将组件展示在预设界面中。

发明内容

本发明提供一种组件展示方法、装置、设备和存储介质，以在拖拽组件后成功将组件展示在预设界面中。

第一方面，本发明实施例提供了一种组件展示方法，包括：

当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标；

根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件；

基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；

基于所述目标展示方式展示所述当前组件和/或所述目标组件。

本发明实施例的技术方案，提供一种组件展示方法，包括：当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标；根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件；基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；基于所述目标展示方式展示所述当前组件和/或所述目标组件。上述技术方案，当前窗口内的当前组件接收到拖拽触发后，可以将拖拽触发的终点位置确定为当前组件的目标位置，并确定目标位置所属的目标窗口以及目标位置在目标窗口对应的坐标系中的目标坐标，进而，可以根据目标坐标确定目标位置在目标窗口内对应的目标组件，该目标组件为当前组件未拖拽至目标位置时，目标位置所展示的组件，在将当前组件拖拽至目标位置时，还可以基于预设界面显示组件展示表，组件展示表中展示有初始组件的展示方式以及各展示方式对应的展示控件，用户基于展示控件触发选择指令后，可以确定该选择指令对应的展示方式为目标展示方式，最后，可以基于目标展示方式展示当前组件和/或目标组件，在将当前组件拖拽至网络页面内任一位置处时，实现对当前组件的正常展示。

进一步地，基于所述拖拽触发确定所述当前组件的目标位置，包括：将所述拖拽触发的终点位置确定为所述当前组件的目标位置。

进一步地，确定所述目标位置在所述目标窗口对应的坐标系中的目标坐标，包括：在所述当前窗口对应的坐标系中确定所述目标位置的当前坐标；根据所述当前窗口对应的坐标系和所述目标窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述目标窗口对应的坐标系中的目标坐标。

进一步地，根据所述当前窗口对应的坐标系和所述目标窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述目标窗口对应的坐标系中的目标坐标，包括：步骤A：根据所述当前窗口对应的坐标系和所述当前窗口对应的上一级窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述当前窗口对应的上一级窗口对应的坐标系内的上一坐标；或者，根据所述当前窗口对应的坐标系和所述当前窗口对应的下一级窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述当前窗口对应的下一级窗口对应的坐标系内的下一坐标；步骤B：确定所述当前窗口对应的上一级窗口是否为所述目标窗口；或者，确定所述当前窗口对应的下一级窗口是否为所述目标窗口；步骤C：如果所述当前窗口对应的上一级窗口为所述目标窗口，则将所述上一坐标确定为所述目标坐标；如果所述当前窗口对应的下一级窗口为所述目标窗口，则将所述下一坐标确定为所述目标坐标；否则，将所述当前窗口对应的上一级窗口确定为所述当前窗口，并返回执行步骤A；或者，将所述当前窗口对应的下一级窗口确定为所述当前窗口，并返回执行步骤A。

进一步地，根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件，包括：调用坐标-组件确定算法，确定所述目标窗口内所述目标坐标对应的所述目标位置处的所述目标组件。

进一步地，所述目标展示方式包括目标方位展示方式，相应地，基于所述目标展示方式展示所述当前组件和/或所述目标组件，包括：将所述当前组件展示在所述目标组件的目标方位处。

进一步地，所述目标展示方式包括目标层级展示方式，所述目标层级展示方式为上层展示方式或者下层展示方式，相应地，基于所述目标展示方式展示所述当前组件和/或所述目标组件，包括：基于所述上层展示方式将所述当前组件展示在所述目标组件上层，以基于所述当前组件替换所述目标组件；基于所述下层展示方式将所述当前组件展示在所述目标组件下层，以将所述当前组件隐藏在所述目标组件下层。

第二方面，本发明实施例还提供了一种组件展示装置，包括：

触发模块，用于在当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标；

确定模块，用于根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件；

执行模块，用于基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；

展示模块，用于基于所述目标展示方式展示所述当前组件和/或所述目标组件。

第三方面，本发明实施例还提供了一种服务器，所述服务器包括：

至少一个处理器；以及与所述至少一个处理器通信连接的存储器；

其中，所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行第一方面中任一所述的组件展示方法。

第四方面，本发明实施例还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如第一方面中任一所述的组件展示法。

第五方面，本申请提供一种计算机程序产品，该计算机程序产品包括计算机指令，当计算机指令在计算机上运行时，使得计算机执行如第一方面提供的组件展示方法。

需要说明的是，上述计算机指令可以全部或者部分存储在计算机可读存储介质上。其中，计算机可读存储介质可以与组件展示装置的处理器封装在一起的，也可以与组件展示装置的处理器单独封装，本申请对此不做限定。

本申请中第二方面、第三方面、第四方面以及第五方面的描述，可以参考第一方面的详细描述；并且，第二方面、第三方面、第四方面、以及第五方面的描述的有益效果，可以参考第一方面的有益效果分析，此处不再赘述。

在本申请中，上述组件展示装置的名字对设备或功能模块本身不构成限定，在实际实现中，这些设备或功能模块可以以其他名称出现。只要各个设备或功能模块的功能和本申请类似，属于本申请权利要求及其等同技术的范围之内。

本申请的这些方面或其他方面在以下的描述中会更加简明易懂。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1a为一种网络页面的示意图；

图1b为另一种网络页面的示意图；

图1c为又一种网络页面的示意图；

图2a为iframe进行向上溯源的示意图；

图2b为主窗口和iframe的父子二级关系图；

图3为本发明实施例提供的一种组件展示方法的流程图；

图4为本发明实施例提供的另一种组件展示方法的流程图；

图5为又一种网络页面的示意图；

图6为本发明实施例提供的一种组件展示装置的结构示意图；

图7为本发明实施例提供的一种计算机设备的结构示意图。

具体实施方式

下面结合附图和实施例对本发明作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部结构。

本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。

本申请的说明书以及附图中的术语“第一”和“第二”等是用于区别不同的对象，或者用于区别对同一对象的不同处理，而不是用于描述对象的特定顺序。

此外，本申请的描述中所提到的术语“包括”和“具有”以及它们的任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选的还包括其他没有列出的步骤或单元，或可选的还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作(或步骤)描述成顺序的处理，但是其中的许多操作可以被并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。此外，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

需要说明的是，本申请实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。

在本申请的描述中，除非另有说明，“多个”的含义是指两个或两个以上。

网络页面中一般包括多个相互嵌套的窗口，例如，图1a为一种网络页面的示意图，如图1a所示，该网络页面包括主窗口、主窗口中的子窗口A、子窗口B、子窗口B中的孙窗口。

网络页面中，主窗口和子窗口之间的事件是隔离的，同一主窗口下的各子窗口之间的事件也是隔离的，因此，主窗口无法直接监听子窗口中的事件。图1b为另一种网络页面的示意图，如图1b所示，该网络页面包括主窗口和子窗口，当主窗口中的组件被拖拽到子窗口时，主窗口会突然监听不到鼠标移动事件，即监听不到组件拖拽事件，容易造成组件丢失，进而无法实现将主窗口中的组件拖拽至子窗口内进行展示。图1c为又一种网络页面的示意图，如图1c所示，该网络页面同样包括主窗口和子窗口，当子窗口中的组件被拖拽到主窗口时，无法确定主窗口内对应位置的组件，无法确定将子窗口中的组件在主窗口中的展示位置，进而无法实现将子窗口中的组件拖拽至主窗口内进行展示。

因此，本申请提出一种组件展示方法，以实现在拖拽组件后成功将组件展示在预设界面中。

在执行本申请之前，需要在主窗口建立一个共享变量。对网络页面中的每个iframe(同域网站的网络页面中的非主窗口，可以为子窗口或者孙窗口等)进行向上溯源，直至查找到主窗口，将iframe绑定至主窗口，并将iframe与主窗口的绑定关系存储至共享变量。这样，各iframe均通过共享变量与主窗口建立通信。任一iframe中任一组件被触发，触发信息可以发送至共享变量，主窗口对共享变量中的触发信息进行处理和分配。

图2a为iframe进行向上溯源的示意图，如图2a所示，对子窗口A向上溯源，查找到主窗口，进而可以将子窗口A绑定至主窗口；对孙窗口向上溯源，查找到子窗口B，继续对子窗口B向上溯源，查找到主窗口，进而可以将孙窗口绑定至主窗口，当然，也可以将子窗口B绑定至主窗口。所有iframe均绑定至主窗口后，可以形成如图2b所示的主窗口和iframe的父子二级关系图，如图2b所示，子窗口A、子窗口B、孙窗口，均与主窗口建立了通信。

下面将结合示图和各实施例对本申请提出的组件展示方法进行详细的描述。

图3为本发明实施例提供的一种组件展示方法的流程图，本实施例可适用于需要将网络页面中各窗口中的组件进行拖拽并显示的情况，该方法可以由组件展示装置来执行，如图3所示，具体包括如下步骤：

步骤310、当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标。

其中，当前窗口可以为网络页面中的任一窗口，当前组件可以为网络页面中的任一窗口中的任一组件，目标位置可以为网络页面中的任一位置。

具体地，当前窗口内的当前组件接收到拖拽触发，可以对当前组件进行拖拽，以将当前组件从初始位置进行移动。进而，可以将拖拽的终点位置确定为当前组件的目标位置。网络页面中任一窗口中的任一组件被触发时，可以根据当前窗口对应的坐标系确定组件的初始坐标。拖拽结束确定目标位置后，可以确定目标位置在当前窗口对应的坐标系中的当前坐标。由于网络页面的每个窗口均存在一定的窗口范围，如果目标位置在当前窗口对应的坐标系中的当前坐标表明目标位置超出当前窗口，则需要确定目标位置所属的目标窗口以及目标位置在目标窗口对应的坐标系中的目标坐标。

具体而言，目标位置在当前窗口对应的坐标系中的当前坐标表明目标位置超出当前窗口时，可以根据当前窗口对应的坐标系的原点位置、目标位置在当前窗口对应的坐标系中的当前坐标以及当前窗口的窗口范围，确定目标位置超出当前窗口的状态为偏向当前窗口对应的上一级窗口或者偏向下一级窗口。目标位置超出当前窗口的状态为偏向当前窗口对应的上一级窗口时，可以根据初始窗口对应的坐标系与初始窗口所对应的上一级窗口对应的坐标系的转换关系，确定目标位置在上一级窗口对应的坐标系中的坐标，如果该坐标表明预期位置在上一级窗口的窗口范围内，则可以确定上一级窗口为目标位置位于的目标窗口，且可以确定目标位置在目标窗口对应的坐标系中的坐标为目标位置的目标坐标，如果该坐标表明预设位置不在上一级窗口的窗口范围内，则可以根据上一级窗口对应的坐标系与上一级窗口所对应的更上一级窗口对应的坐标系的转换关系，确定目标位置在更上一级窗口对应的坐标系中的坐标，直至确定目标位置所位于的目标窗口以及在目标窗口对应的坐标系中的目标坐标。同样地，目标位置超出当前窗口的状态为偏向当前窗口对应的下一级窗口时，可以根据初始窗口对应的坐标系与初始窗口所对应的下一级窗口对应的坐标系的转换关系，确定目标位置在下一级窗口对应的坐标系中的坐标，如果该坐标表明预期位置在下一级窗口的窗口范围内，则可以确定下一级窗口为目标位置对应的目标窗口，且可以确定目标位置在目标窗口对应的坐标系中的坐标为目标位置的目标坐标，如果该坐标表明预期位置在下一级窗口的对应的更下一级窗口的窗口范围内，则可以根据下一级窗口对应的坐标系与下一级子窗口所对应的更下一级窗口对应的坐标系的转换关系，确定目标位置在更下一级窗口对应的坐标系中的坐标，直至确定目标位置所位于的目标窗口以及在目标窗口对应的坐标系中的目标坐标。

由于网络页面中的每个窗口均与主窗口建立了通信，因此，在对任一窗口中的任一组件进行拖拽时，其对应的信息均不会丢失。

本发明实施例中，当前窗口内的当前组件接收到拖拽触发后，可以根据拖拽的终点位置，即可以根据拖拽触发的终点位置确定当前组件的目标位置，进而可以确定目标位置在当前窗口对应的坐标系中的当前坐标，并根据该坐标确定目标位置所属的目标窗口以及目标位置在目标窗口对应的坐标系中的目标坐标，目标坐标可以用于确定目标位置在目标窗口内对应的目标组件。

步骤320、根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件。

具体地，可以调用坐标-组件确定算法确定目标窗口内目标坐标对应的目标组件，并将其确定为目标位置处的目标组件。该目标组件为目标窗口内的目标位置正常所展示的组件，即，当前组件未拖拽至目标位置时，目标位置所展示的组件。

本发明实施例中，可以确定在当前组件未拖拽至目标窗口内的目标位置处时，目标窗口内的目标位置处所展示的组件。

步骤330、基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式。

其中，组件展示表可以包括组件的展示方式，展示方式可以包括方位展示方式或者层级展示方式。

具体地，基于预设界面展示的组件展示表中的各展示方式分别对应不同的展示控件，用户触发展示控件后，可以触发对应的选择指令，进而，可以在组件展示表中确定选择指令对应的目标展示方式。

本发明实施例中，通过用户基于预设界面所展示的组件展示表中各展示方式对应的展示控件触发选择指令后，可以确定该选择指令对应的目标展示方式，该目标展示方式可以用于确定当前组件的展示方式，即可以确定当前组件相对于目标组件的展示方位或者展示层级。

步骤340、基于所述目标展示方式展示所述当前组件和/或所述目标组件。

具体地，确定目标展示方式为目标方位展示方式后，可以确定目标方位展示方式所代表的目标方位为左侧、右侧、上侧或者下侧，进而可以将当前组件展示在目标组件的目标方位处；确定目标展示为目标层级展示方式后，可以确定目标层级为上层或者下层，进而可以将当前组件展示在目标组件上层，以基于当前组件替换目标组件，或者，可以将当前组件展示在目标组件下层，以将当前组件隐藏在目标组件下层。

本发明实施例中，在基于拖拽触发将当前组件拖拽至目标位置后，可以确定目标位置所属的目标窗口以及窗口内目标位置的目标组件，并在确定目标展示方式后，基于目标展示方式展示当前组件和/或目标组件，在将当前组件拖拽至网络页面内任一位置处时，实现对当前的正常展示。

本发明实施例提供的组件展示方法，包括：当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标；根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件；基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；基于所述目标展示方式展示所述当前组件和/或所述目标组件。上述技术方案，当前窗口内的当前组件接收到拖拽触发后，可以将拖拽触发的终点位置确定为当前组件的目标位置，并确定目标位置所属的目标窗口以及目标位置在目标窗口对应的坐标系中的目标坐标，进而，可以根据目标坐标确定目标位置在目标窗口内对应的目标组件，该目标组件为当前组件未拖拽至目标位置时，目标位置所展示的组件，在将当前组件拖拽至目标位置时，还可以基于预设界面显示组件展示表，组件展示表中展示有初始组件的展示方式以及各展示方式对应的展示控件，用户基于展示控件触发选择指令后，可以确定该选择指令对应的展示方式为目标展示方式，最后，可以基于目标展示方式展示当前组件和/或目标组件，在将当前组件拖拽至网络页面内任一位置处时，实现对当前组件的正常展示。

图4为本发明实施例提供的另一种组件展示方法的流程图，本实施例是在上述实施例的基础上进行具体化。在本实施例中，该方法还可以包括：

步骤410、当前窗口内的当前组件接收到拖拽触发后，将所述拖拽触发的终点位置确定为所述当前组件的目标位置。

具体地，用户点击当前组件并进行拖拽时，可以触发拖拽触发，拖拽的终点位置即为拖拽触发的终点位置。例如，用户基于鼠标点击并拖拽当前组件，将当前组件拖拽至网络页面的任一位置，可以将拖拽的终点位置确定为当前组件的目标位置。

在实际应用中，网络页面可以作为可视化编辑器的界面，网络页面包含多个窗口，同样，可视化编辑器的界面也包含多个窗口，在可视化编辑器的界面中可以实现对各窗口的拖拽。当然，为了降低服务器负担，可以选择网络页面中需要进行编辑的窗口作为可视化编辑器的界面，以从其他窗口拖拽组件至需要进行编辑的窗口，以实现对需要进行编辑的窗口页面的编辑。

步骤420、在所述当前窗口对应的坐标系中确定所述目标位置的当前坐标。

具体地，可以在当前窗口对应的坐标系中确定目标位置的当前坐标，如果目标位置在当前窗口对应的坐标系中的当前坐标表明目标位置仍在当前窗口，则可以将目标位置在当前窗口对应的坐标系中的当前坐标确定为目标位置的目标坐标。如果目标位置在当前窗口对应的坐标系中的当前坐标表明目标位置超出当前窗口，则需要确定目标位置所属的目标窗口以及目标位置在目标窗口中的目标坐标。

步骤430、根据所述当前窗口对应的坐标系和所述目标窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在目标窗口对应的坐标系中的目标坐标。

目标位置在当前窗口对应的坐标系中的当前坐标表明目标位置超出当前窗口时，可以根据当前窗口对应的坐标系的原点位置、目标位置在当前窗口对应的坐标系中的当前坐标以及当前窗口的窗口范围，确定目标位置超出当前窗口的状态为偏向当前窗口对应的上一级窗口或者偏向下一级窗口。

目标位置超出当前窗口的状态为偏向当前窗口对应的上一级窗口时，可以执行：步骤A：根据所述当前窗口对应的坐标系和所述当前窗口对应的上一级窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述当前窗口对应的上一级窗口对应的坐标系内的上一坐标；步骤B：确定所述当前窗口对应的上一级窗口是否为所述目标窗口；步骤C：如果所述当前窗口对应的上一级窗口为所述目标窗口，则将所述上一坐标确定为所述目标坐标；否则，将所述当前窗口对应的上一级窗口确定为所述当前窗口，并返回执行步骤A。

目标位置超出当前窗口的状态为偏向当前窗口对应的下一级窗口时，可以执行：步骤A：根据所述当前窗口对应的坐标系和所述当前窗口对应的下一级窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述当前窗口对应的下一级窗口对应的坐标系内的下一坐标；步骤B：确定所述当前窗口对应的下一级窗口是否为所述目标窗口；步骤C：如果所述当前窗口对应的下一级窗口为所述目标窗口，则将所述下一坐标确定为所述目标坐标；否则，将所述当前窗口对应的下一级窗口确定为所述当前窗口，并返回执行步骤A。

图5为又一种网络页面的示意图，如图5所示，子窗口A的左上角位于主窗口对应的坐标系中的(50，80)处，子窗口A内又嵌套了孙窗口B，孙窗口B的左上角位于子窗口A对应的坐标系中的(50，80)处，即位于主窗口对应的坐标系中的(100，160)处。因此，对于主窗口对应的坐标系中的任一点(a，b)，可以确定该点在子窗口A对应的坐标系中的坐标为(a+50，b+80)，可以确定该点在孙窗口B对应的坐标系中的坐标为(a+100，b+160)。即，在确定网络页面中任一点在任一窗口对应的坐标系中的坐标后，可以确定该点在其他窗口对应的坐标系中的坐标。

例如，X在孙窗口B对应的坐标系中的坐标为(100，100)，可以得知，X在子窗口A对应的坐标系中的坐标为(150，180)，X在主窗口对应的坐标系中的坐标为(200，260)。

如图1c所述，子窗口中的组件被从子窗口中的起始位置拖拽至主窗口中的预期位置，可以得到主窗口中的预期位置在子窗口对应的坐标系中的坐标为(-150，-50)，明显可以得知，预期位置已经超出了子窗口的窗口范围，因此，可以根据子窗口对应的坐标系与子窗口所对应的父窗口对应的坐标系的转换关系，确定预测位置在父窗口对应的坐标系中的坐标，如果该坐标表明预期位置在父窗口的窗口范围内，则可以确定预测位置在父窗口对应的坐标系中的坐标为预测位置的目标坐标，如果该坐标表明预设位置不在父窗口的窗口范围内，则可以根据父窗口对应的坐标系与父子窗口所对应的更上一级窗口对应的坐标系的转换关系，确定预测位置在更上一级窗口对应的坐标系中的坐标，直至确定预测位置对应的目标坐标。

本发明实施例中，当前窗口内的当前组件接收到拖拽触发后，可以根据拖拽触发的终点位置确定当前组件的目标位置，进而可以确定目标位置在当前窗口对应的坐标系中的当前坐标，并根据该坐标确定目标位置所属的目标窗口以及目标位置在目标窗口对应的坐标系中的目标坐标，目标坐标可以用于确定目标位置在目标窗口内对应的目标组件。

步骤440、调用坐标-组件确定算法，确定所述目标窗口内所述目标坐标对应的所述目标位置处的所述目标组件。

具体地，可以调用坐标-组件确定算法确定目标窗口内目标坐标对应的目标组件，并将其确定为目标位置处的目标组件。该目标组件为目标窗口内的目标位置正常所展示的组件，即，当前组件未拖拽至目标位置时，目标位置所展示的组件。

步骤450、基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式。

具体地，基于预设界面展示的组件展示表中的各展示方式分别对应不同的展示控件，用户触发展示控件后，可以触发对应的选择指令，进而，可以在组件展示表中确定选择指令对应的目标展示方式。

步骤460、基于所述目标展示方式展示所述当前组件和/或所述目标组件。

一种实施方式中，所述目标展示方式包括目标方位展示方式，相应地，步骤460具体可以包括：

将所述当前组件展示在所述目标组件的目标方位处。

目标方位展示方式可以为左侧展示方式、右侧展示方式、上侧展示方式或者下侧展示方式。

具体地，确定目标展示方式后，如果目标展示方式为目标方位展示方式，可以进一步确定目标方位展示方式为左侧展示方式、右侧展示方式、上侧展示方式或者下侧展示方式，进而可以将当前组件展示在目标组件的目标方位处，即可以将当前组件展示在目标组件的左侧、右侧、上侧或者下侧。

另一种实施方式中，所述目标展示方式包括目标层级展示方式，所述目标层级展示方式为上层展示方式或者下层展示方式，相应地，步骤460具体可以包括：

基于所述上层展示方式将所述当前组件展示在所述目标组件上层，以基于所述当前组件替换所述目标组件；基于所述下层展示方式将所述当前组件展示在所述目标组件下层，以将所述当前组件隐藏在所述目标组件下层。

具体地，确定目标展示方式后，如果目标展示方式为目标层级展示方式，可以进一步确定目标层级展示方式为上层展示方式或者下层展示方式，进而可以将当前组件展示在目标组件的上层或者下层，即可以基于当前组件替换目标组件，或者，将当前组件隐藏在目标组件下层。

本发明实施例中，在基于拖拽触发将当前组件拖拽至目标位置后，可以确定目标位置所属的目标窗口以及窗口内目标位置的目标组件，并在确定目标展示方式后，基于目标展示方式展示当前组件和/或目标组件，以基于当前组件替换目标组件，或者，将当前组件隐藏在目标组件下层，在将当前组件拖拽至可网络页面内任一位置处时，实现对当前组件的正常展示。

本发明实施例提供的组件展示方法，包括：当前窗口内的当前组件接收到拖拽触发后，将所述拖拽触发的终点位置确定为所述当前组件的目标位置；在所述当前窗口对应的坐标系中确定所述目标位置的当前坐标；根据所述当前窗口对应的坐标系和所述目标窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述目标窗口对应的坐标系中的目标坐标；调用坐标-组件确定算法，确定所述目标窗口内所述目标坐标对应的所述目标位置处的所述目标组件；基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；基于所述目标展示方式展示所述当前组件和/或所述目标组件。上述技术方案，当前窗口内的当前组件接收到拖拽触发后，可以将拖拽触发的终点位置确定为当前组件的目标位置，并确定目标位置在当前窗口对应的坐标系中的当前坐标，根据当前窗口对应的坐标系和所述目标窗口对应的坐标系的坐标转换关系以及目标位置的当前坐标，确定目标位置在目标窗口对应的坐标系中的目标坐标，实现确定目标位置所属的目标窗口以及目标位置在目标窗口对应的坐标系中的目标坐标，进而，可以调用坐标-组件确定算法，确定目标窗口内目标坐标处的目标组件，该目标组件为当前组件未拖拽至目标位置时，目标位置所展示的组件，在将当前组件拖拽至目标位置时，还可以基于预设界面显示组件展示表，并基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式，最后，可以基于目标展示方式展示当前组件和/或目标组件，以基于当前组件替换目标组件，或者，将当前组件隐藏在目标组件下层，在将当前组件拖拽至网络页面内任一位置处时，实现对当前组件的正常展示。

图6为本发明实施例提供的一种组件展示装置的结构示意图，该装置可以适用于需要将网络页面中各窗口中的组件进行拖拽并显示的情况，该装置可以通过软件和/或硬件实现，并一般集成在计算机设备中。

如图6所示，该装置包括：

触发模块610，用于在当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标；

确定模块620，用于根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件；

执行模块630，用于基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；

展示模块640，用于基于所述目标展示方式展示所述当前组件和/或所述目标组件。

本实施例提供的组件展示装置，当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标；根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件；基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；基于所述目标展示方式展示所述当前组件和/或所述目标组件。上述技术方案，当前窗口内的当前组件接收到拖拽触发后，可以将拖拽触发的终点位置确定为当前组件的目标位置，并确定目标位置所属的目标窗口以及目标位置在目标窗口对应的坐标系中的目标坐标，进而，可以根据目标坐标确定目标位置在目标窗口内对应的目标组件，该目标组件为当前组件未拖拽至目标位置时，目标位置所展示的组件，在将当前组件拖拽至目标位置时，还可以基于预设界面显示组件展示表，组件展示表中展示有初始组件的展示方式以及各展示方式对应的展示控件，用户基于展示控件触发选择指令后，可以确定该选择指令对应的展示方式为目标展示方式，最后，可以基于目标展示方式展示当前组件和/或目标组件，在将当前组件拖拽至网络页面内任一位置处时，实现对当前组件的正常展示。

在上述实施例的基础上，触发模块610，具体用于：在当前窗口内的当前组件接收到拖拽触发后，将所述拖拽触发的终点位置确定为所述当前组件的目标位置；在所述当前窗口对应的坐标系中确定所述目标位置的当前坐标；根据所述当前窗口对应的坐标系和所述目标窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述目标窗口对应的坐标系中的目标坐标。

在上述实施例的基础上，根据所述当前窗口对应的坐标系和所述目标窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述目标窗口对应的坐标系中的目标坐标，包括：步骤A：根据所述当前窗口对应的坐标系和所述当前窗口对应的上一级窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述当前窗口对应的上一级窗口对应的坐标系内的上一坐标；或者，根据所述当前窗口对应的坐标系和所述当前窗口对应的下一级窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述当前窗口对应的下一级窗口对应的坐标系内的下一坐标；步骤B：确定所述当前窗口对应的上一级窗口是否为所述目标窗口；或者，确定所述当前窗口对应的下一级窗口是否为所述目标窗口；步骤C：如果所述当前窗口对应的上一级窗口为所述目标窗口，则将所述上一坐标确定为所述目标坐标；如果所述当前窗口对应的下一级窗口为所述目标窗口，则将所述下一坐标确定为所述目标坐标；否则，将所述当前窗口对应的上一级窗口确定为所述当前窗口，并返回执行步骤A；或者，将所述当前窗口对应的下一级窗口确定为所述当前窗口，并返回执行步骤A。

在上述实施例的基础上，确定模块620，具体用于：调用坐标-组件确定算法，确定所述目标窗口内所述目标坐标对应的所述目标位置处的所述目标组件。

在上述实施例的基础上，所述目标展示方式包括目标方位展示方式，相应地，展示模块640，具体用于：将所述当前组件展示在所述目标组件的目标方位处。

在上述实施例的基础上，所述目标展示方式包括目标层级展示方式，所述目标层级展示方式为上层展示方式或者下层展示方式，相应地，展示模块640，具体用于：基于所述上层展示方式将所述当前组件展示在所述目标组件上层，以基于所述当前组件替换所述目标组件；基于所述下层展示方式将所述当前组件展示在所述目标组件下层，以将所述当前组件隐藏在所述目标组件下层。

本发明实施例所提供的组件展示装置可执行本发明任意实施例所提供的组件展示方法，具备执行组件展示方法相应的功能模块和有益效果。

值得注意的是，上述组件展示装置的实施例中，所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。

图7为本发明实施例提供的一种计算机设备的结构示意图。图7示出了适于用来实现本发明实施方式的示例性计算机设备7的框图。图7显示的计算机设备7仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，计算机设备7以通用计算服务器的形式表现。计算机设备7的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

计算机设备7典型地包括多种计算机系统可读介质。这些介质可以是任何能够被计算机设备7访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。计算机设备7可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图7未显示，通常称为“硬盘驱动器”)。尽管图7中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。系统存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如系统存储器28中，这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。

计算机设备7也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该计算机设备7交互的设备通信，和/或与使得该计算机设备7能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，计算机设备7还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图7所示，网络适配器20通过总线18与计算机设备7的其它模块通信。应当明白，尽管图7中未示出，可以结合计算机设备7使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理单元16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及页面显示，例如实现本发实施例所提供的组件展示方法，该方法包括：当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标；根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件；基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；基于所述目标展示方式展示所述当前组件和/或所述目标组件。

当然，本领域技术人员可以理解，处理器还可以实现本发明任意实施例所提供的组件展示方法的技术方案。

本发明实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现例如本发实施例所提供的组件展示方法，该方法包括：当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标；根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件；基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；基于所述目标展示方式展示所述当前组件和/或所述目标组件。

本发明实施例的计算机存储介质，可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于：电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，程序设计语言包括面向对象的程序设计语言，诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

本领域普通技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个计算装置上，或者分布在多个计算装置所组成的网络上，可选地，他们可以用计算机装置可执行的程序代码来实现，从而可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件的结合。

另外，本发明技术方案中对数据的获取、存储、使用、处理等均符合国家法律法规的相关规定。

注意，上述仅为本发明的较佳实施例及所运用技术原理。本领域技术人员会理解，本发明不限于这里的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本发明的保护范围。因此，虽然通过以上实施例对本发明进行了较为详细的说明，但是本发明不仅仅限于以上实施例，在不脱离本发明构思的情况下，还可以包括更多其他等效实施例，而本发明的范围由所附的权利要求范围决定。

Claims (10)

1.一种组件展示方法，其特征在于，包括：

当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标；

根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件；

基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；

基于所述目标展示方式展示所述当前组件和/或所述目标组件。

2.根据权利要求1所述的组件展示方法，其特征在于，基于所述拖拽触发确定所述当前组件的目标位置，包括：

将所述拖拽触发的终点位置确定为所述当前组件的目标位置。

3.根据权利要求1所述的组件展示方法，其特征在于，确定所述目标位置在所述目标窗口对应的坐标系中的目标坐标，包括：

在所述当前窗口对应的坐标系中确定所述目标位置的当前坐标；

根据所述当前窗口对应的坐标系和所述目标窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述目标窗口对应的坐标系中的目标坐标。

4.根据权利要求3所述的组件展示方法，其特征在于，根据所述当前窗口对应的坐标系和所述目标窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述目标窗口对应的坐标系中的目标坐标，包括：

步骤A：根据所述当前窗口对应的坐标系和所述当前窗口对应的上一级窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述当前窗口对应的上一级窗口对应的坐标系内的上一坐标；或者，根据所述当前窗口对应的坐标系和所述当前窗口对应的下一级窗口对应的坐标系的坐标转换关系以及所述目标位置的当前坐标，确定所述目标位置在所述当前窗口对应的下一级窗口对应的坐标系内的下一坐标；

步骤B：确定所述当前窗口对应的上一级窗口是否为所述目标窗口；或者，确定所述当前窗口对应的下一级窗口是否为所述目标窗口；

步骤C：如果所述当前窗口对应的上一级窗口为所述目标窗口，则将所述上一坐标确定为所述目标坐标；如果所述当前窗口对应的下一级窗口为所述目标窗口，则将所述下一坐标确定为所述目标坐标；否则，将所述当前窗口对应的上一级窗口确定为所述当前窗口，并返回执行步骤A；或者，将所述当前窗口对应的下一级窗口确定为所述当前窗口，并返回执行步骤A。

5.根据权利要求1所述的组件展示方法，其特征在于，根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件，包括：

调用坐标-组件确定算法，确定所述目标窗口内所述目标坐标对应的所述目标位置处的所述目标组件。

6.根据权利要求1所述的组件展示方法，其特征在于，所述目标展示方式包括目标方位展示方式，相应地，基于所述目标展示方式展示所述当前组件和/或所述目标组件，包括：

将所述当前组件展示在所述目标组件的目标方位处。

7.根据权利要求6所述的组件展示方法，其特征在于，所述目标展示方式包括目标层级展示方式，所述目标层级展示方式为上层展示方式或者下层展示方式，相应地，基于所述目标展示方式展示所述当前组件和/或所述目标组件，包括：

基于所述上层展示方式将所述当前组件展示在所述目标组件上层，以基于所述当前组件替换所述目标组件；

基于所述下层展示方式将所述当前组件展示在所述目标组件下层，以将所述当前组件隐藏在所述目标组件下层。

8.一种组件展示装置，其特征在于，包括：

触发模块，用于在当前窗口内的当前组件接收到拖拽触发后，基于所述拖拽触发确定所述当前组件的目标位置，并确定所述目标位置在目标窗口对应的坐标系中的目标坐标；

确定模块，用于根据所述目标坐标确定所述目标窗口内所述目标位置处的目标组件；

执行模块，用于基于用户在预设界面显示的组件展示表中触发的选择指令确定目标展示方式；

展示模块，用于基于所述目标展示方式展示所述当前组件和/或所述目标组件。

9.一种计算机设备，其特征在于，包括：

至少一个处理器；以及与所述至少一个处理器通信连接的存储器；

其中，所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-7中任一所述的组件展示方法。

10.一种包含计算机可执行指令的存储介质，其特征在于，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-7中任一所述的组件展示方法。

Images