CN116048320A - 多组件跨容器的控制方法、装置及电子设备 - Google Patents

多组件跨容器的控制方法、装置及电子设备 Download PDF

Info

Publication number
CN116048320A
CN116048320A CN202111265343.7A CN202111265343A CN116048320A CN 116048320 A CN116048320 A CN 116048320A CN 202111265343 A CN202111265343 A CN 202111265343A CN 116048320 A CN116048320 A CN 116048320A
Authority
CN
China
Prior art keywords
container
components
overlap
response
boundary
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202111265343.7A
Other languages
English (en)
Inventor
张雨晗
王静
张泽
陈宇
黄启洋
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Zitiao Network Technology Co Ltd
Original Assignee
Beijing Zitiao Network Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Zitiao Network Technology Co Ltd filed Critical Beijing Zitiao Network Technology Co Ltd
Priority to CN202111265343.7A priority Critical patent/CN116048320A/zh
Priority to PCT/CN2022/113408 priority patent/WO2023071448A1/zh
Publication of CN116048320A publication Critical patent/CN116048320A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/33—Intelligent editors
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Abstract

本公开涉及一种多组件跨容器的控制方法，涉及软件开发技术领域。包括：显示编辑页面，编辑页面中包括画布区域，画布区域内显示第一容器中的多个组件；响应于针对多个组件中至少两个组件的拖动输入，在至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将目标组件至少两个组件添加至第二容器中，第二容器为第一容器的子容器或者父容器。本公开实施例用于实现至少两个组件跨容器的移动。

Description

多组件跨容器的控制方法、装置及电子设备
技术领域
本公开涉及软件开发技术领域，尤其涉及一种多组件跨容器的控制方法、装置及电子设备。
背景技术
目前在运营活动中，需要设计对应运营活动的一些显示页面，这些显示页面会由编辑器进行显示页面的编辑设计，通常一个页面中可以有一个或多个容器，且一个容器中可以有一个或多个组件。通常针对每个活动页面都需要通过页面编辑器来进行编辑设计，在编辑过程中，容器内的组件可以实现在容器内的移动，但是无法实现跨容器的移动，因此目前显示页面的编辑设计过程不够灵活。
发明内容
为了解决上述技术问题或者至少部分地解决上述技术问题，本公开提供了一种多组件跨容器的控制方法、装置及电子设备，可以实现多组件的跨容器移动，显示界面的编辑设计过程更加灵活。
为了实现上述目的，本发明实施例提供技术方案如下：
第一方面，提供一种多组件跨容器的控制方法，包括：
显示编辑页面，所述编辑页面中包括画布区域，所述画布区域内显示第一容器中的多个组件；
响应于针对所述多个组件中至少两个组件的拖动输入，在所述至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将所述至少两个组件添加至所述第二容器中，所述第二容器为所述第一容器的子容器或者父容器。
作为本公开实施例一种可选的实施方式，
所述显示编辑页面之后，所述响应于针对所述多个组件中至少两个组件的拖动输入之前，所述方法还包括：
响应于针对所述至少两个组件的选中输入，显示用于框选所述至少两个组件的选中框，在所述选中框内显示选中光标；
所述在所述至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将所述至少两个组件添加至所述第二容器中，包括：
在所述至少两个组件中的至少一个组件与第二容器存在交叠，且所述选中光标处于所述第二容器之内时，将所述至少两个组件添加至所述第二容器中。
作为本公开实施例一种可选的实施方式，所述第二容器为所述第一容器的父容器，所述方法还包括：
响应于针对所述至少两个组件的拖动输入，在满足第一条件时，触发以响应样式显示所述第二容器的边界；
所述第一条件包括：
所述选中光标从所述第一容器内部移出；
和/或，
所述至少两个组件中的至少一个组件移动至与所述第一容器的边界交叠。
作为本公开实施例一种可选的实施方式，所述第二容器为所述第一容器的父容器；
所述在所述至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将所述至少两个组件添加至所述第二容器中之前，还包括：
所述至少两个组件中的至少一个组件移动至与所述第一容器的边界交叠。
作为本公开实施例一种可选的实施方式，
所述第二容器为所述第一容器的子容器，所述至少两个组件与所述第二容器为同级关系，且所述至少两个组件与所述第二容器不交叠，所述方法还包括：
响应于针对所述至少两个组件的拖动输入，在满足第二条件时，触发以响应样式显示所述第二容器的边界；
所述第二条件包括：
所述选中光标移动至所述第二容器内部；
和/或，
所述至少两个组件中的至少一个组件移动至与所述第二容器的边界交叠。
作为本公开实施例一种可选的实施方式，所述在所述至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将所述至少两个组件添加至所述第二容器中，包括：
在所述至少两个组件均移动至与所述第二容器交叠的情况下，响应于停止所述拖动输入，将所述至少两个组件添加至所述第二容器中。
第二方面，提供一种多组件跨容器的控制装置，包括：
显示模块，用于显示编辑页面，所述编辑页面中包括画布区域，所述画布区域内显示第一容器中的多个组件；
控制模块，用于响应于针对所述多个组件中至少两个组件的拖动输入，在所述至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将所述至少两个组件添加至所述第二容器中，所述第二容器为所述第一容器的子容器或者父容器。
作为本公开实施例一种可选的实施方式，所述控制模块，还用于：
响应于针对所述至少两个组件的选中输入，显示用于框选所述至少两个组件的选中框，在所述选中框内显示选中光标；
所述控制模块，具体用于：在所述至少两个组件中的至少一个组件与第二容器存在交叠，且所述选中光标处于所述第二容器之内时，触发所述至少两个组件添加至所述第二容器中。
作为本公开实施例一种可选的实施方式，所述第二容器为所述第一容器的父容器，所述控制模块，还用于：
响应于针对所述至少两个组件的拖动输入，在满足第一条件时，触发以响应样式显示所述第二容器的边界；
所述第一条件包括：
所述选中光标从所述第一容器内部移出；
和/或，
所述至少两个组件中的至少一个组件移动至与所述第一容器的边界交叠。
作为本公开实施例一种可选的实施方式，所述第二容器为所述第一容器的父容器；
所述控制模块，还用于：
所述至少两个组件中的至少一个组件移动至与所述第一容器的边界交叠。
作为本公开实施例一种可选的实施方式，所述第二容器为所述第一容器的子容器，所述至少两个组件与所述第二容器为同级关系，且所述至少两个组件与所述第二容器不交叠，所述控制模块，还用于：
响应于针对所述至少两个组件的拖动输入，在满足第二条件时，触发以响应样式显示所述第二容器的边界；
所述第二条件包括：
所述选中光标移动至所述第二容器内部；
和/或，
所述至少两个组件中的至少一个组件移动至与所述第二容器的边界交叠。
作为本公开实施例一种可选的实施方式，所述控制模块，具体用于：
在所述至少两个组件均移动至与所述第二容器交叠的情况下，响应于停止所述拖动输入，将所述至少两个组件添加至所述第二容器中。
第三方面，提供一种电子设备，包括：处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如第一方面或其任一可选的实施方式所述的多组件跨容器的控制方法。
第四方面，提供一种计算机可读存储介质，包括：所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如第一方面或其任一可选的实施方式所述的多组件跨容器的控制方法。
第五方面，提供一种计算机程序产品，其特征在于，包括：当所述计算机程序产品在计算机上运行时，使得所述计算机实现如第一方面或其任一可选的实施方式所述的多组件跨容器的控制方法。
本公开实施例提供的技术方案与现有技术相比具有如下优点：编辑器页面中，可以通过针对第一容器中至少两个组件的拖动输入，控制该至少两个组件在画布区域内移动，在该至少两个组件中的至少一个组件移动至与第二容器交叠时，可以触发将该至少两个组件添加至第二容器中，如此可以实现该至少两个组件跨容器(即从第一容器到第二容器)的移动，这样在编辑器页面中进行显示页面的编辑设计过程时可以实现灵活的页面编辑。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本公开实施例一种多组件跨容器的控制方法的流程示意图；
图2为本公开实施例一种编辑器页面的示意图一；
图3为本公开实施例一种编辑器页面的示意图二；
图4为本公开实施例一种编辑器页面的示意图三；
图5为本公开实施例一种编辑器页面的示意图四；
图6为本公开实施例一种拖动输入过程中编辑器页面的示意图一；
图7为本公开实施例一种编辑器页面的示意图五；
图8为本公开实施例一种编辑器页面的示意图六；
图9为本公开实施例一种编辑器页面的示意图七；
图10为本公开实施例一种编辑器页面的示意图八；
图11为本公开实施例一种拖动输入过程中编辑器页面的示意图二；
图12为本公开实施例一种编辑器页面的示意图九；
图13为本公开实施例提供的一种多组件跨容器的控制装置的结构框图；
图14为本公开实施例提供的一种电子设备的结构示意图。
具体实施方式
为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。
目前在运营活动中，需要设计对应运营活动的一些显示页面，这些显示页面会由编辑器进行显示页面的编辑设计，通常一个页面中可以有一个或多个容器，且一个容器中可以有一个或多个组件。通常针对每个活动页面都需要通过页面编辑器来进行编辑设计，在编辑过程中，容器内的组件可以实现在容器内的移动，但是无法实现跨容器的移动，因此目前显示页面的编辑设计过程不够灵活。
为了解决上述问题，本公开实施例提供一种多组件跨容器的控制方法、装置及电子设备，可以实现至少两个组件跨容器(即从第一容器到第二容器)的移动，这样在编辑器页面中进行显示页面的编辑设计过程时可以实现灵活的页面编辑。
本发明实施例提供的多组件跨容器的控制方法，可以应用于多组件跨容器的控制装置或者电子设备，该多组件跨容器的控制装置可以为该电子设备中，可以实现该多组件跨容器的控制方法的功能模块或者功能实体。
本发明实施例中涉及组件与容器的交叠这一描述，此处交叠可以理解为组件与容器的边界交叠，和/或，组件与容器的面积交叠。其中，组件与容器的边界交叠是指组件的边界与容器的边界存在交叠，组件与容器的面积交叠是指组件的面积与容器的面积存在交叠。
如图1所示，为一种多组件跨容器的控制方法的流程示意图，该方法包括：
101、显示编辑器页面。
其中，所述编辑页面中包括画布区域，该画布区域内显示第一容器中的多个组件。
进一步的，编辑器页面中还包括图层结构区域；在图层结构区域中，可以展示画布区域中各个组件和容器的图层位置，在画布区域内可以显示各个组件以及容器的画布布局。
本公开实施例中图层结构区域内显示第一容器的选项和第二容器的选项，以及第一容器的选项下的多个组件的选项，画布区域内显示多个组件的画布布局，第二容器为第一容器的子容器或者父容器。
如图2所示，为一种编辑器页面的示意图，其中，包括图层结构区域21，以及画布区域22，其中，图层结构区域21中导航栏的选项中包括有三个容器的选项：导航栏子容器1、导航栏子容器2和导航栏子容器3，可以看出在导航栏子容器1中，包括的子容器的选项有：轮播子容器1、轮播子容器2和轮播子容器3，其中，轮播子容器1下存在两个组件的选项，这两个组件分别为：白色方块A和黑色方块B；画布区域22内显示这两个组件的画布布局。如图2中所示，在画布区域内，采用选项1、选项2和选项3分别用于标识导航栏子容器1、导航栏子容器2和导航栏子容器3，图2中画布区域为展示控件选项1所对应的导航栏子容器1的画布布局情况，画布区域中在导航栏子容器1对应页面中可以存在轮播子容器1、轮播子容器2和轮播子容器3的三个选项，其中，采用控件221、控件222，以及控件223分别标识轮播子容器1，轮播子容器2和轮播子容器3，图2所示的画布区域为展示轮播子容器1内画布布局的情况。其中，可以看出轮播子容器1内白色方块A和黑色方块B的画布布局。
进一步的，在上述101之后，可以响应于针对多个组件中至少两个组件的拖动输入，在至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将至少两个组件添加至第二容器中。其中，第二容器为第一容器的子容器或者父容器。在一些实施例中，该过程可以通过以下102和103实现。
其中，拖动输入可以是指选中目标对象(本公开实施例中可以为组件)，并将目标对象拖动到目标区域(位置)释放，并且释放之后目标对象显示在目标区域(位置)的输入。在拖动输入的实施过程中，组件跟随该拖动输入移动，即组件从拖动输入的初始位置一直跟随移动至拖动输入的结束位置，其中，初始位置对应拖动开始时组件在画布区域中的位置，结束位置对应于停止拖动时，组件在画布区域的位置。也就是说，在拖动输入过程中，拖动输入的实时位置即为组件对应的实时位置。
需要说明的是，响应于针对多个组件中至少两个组件的拖动输入，在至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将至少两个组件添加至第二容器中，可以包括多种情况：
例如，响应于针对多个组件中至少两个组件的拖动输入，在至少两个组件中的至少一个组件与第二容器存在交叠的情况下，无论拖动输入是否停止，均将至少两个组件添加至第二容器中。
又例如，响应于针对多个组件中至少两个组件的拖动输入，在拖动输入停止时，如果至少两个组件中的至少一个组件与第二容器存在交叠，则将至少两个组件添加至第二容器中。
102、响应于针对多个组件中的至少两个组件的选中输入，选中至少两个组件，在画布区域内显示用于框选至少两个组件的选中框。
其中，上述针对多个组件中的至少两个组件的选中输入，可以为用户通过鼠标控制选中光标针对至少两个组件的连续点击输入，或者通过控制鼠标操作来生成选中框，选中至少两个组件的输入。
在一些实施例中，响应于针对多个组件中的至少两个组件的输入，选中至少两个组件，在画布区域内显示用于框选至少两个组件的选中框，并在选中框内显示选中光标。
结合图2，在用户通过针对画布区域中白色方块A和黑色方块B选中输入，可以选中白色方块A和黑色方块B，并显示选中框。如图3所示的编辑器页面的示意图中，显示有用于框选白色方块A和黑色方块B的选中框S，以及在该选中框S内显示选中光标T。
103、响应于针对选中框的拖动输入，至少两个组件在画布区域内移动，在至少两个组件中的至少一个组件移动至与第二容器交叠时，触发至少两个组件添加至第二容器。
在一些实施例中，响应于针对该至少两个组件的输入，可以在选中框内显示选中光标；上述在至少两个组件中的至少一个组件移动至与第二容器交叠时，触发至少两个组件添加至第二容器，包括：在至少两个组件中的至少一个组件移动至与第二容器交叠，且选中光标处于第二容器之内时，触发至少两个组件添加至第二容器，即将至少两个组件添加至第二容器中。
在一些实施例中，在至少两个组件中的至少一个组件移动至与第二容器交叠时，响应于停止拖动输入，触发至少两个组件添加至第二容器。
在一些实施例中，在至少两个组件中的至少一个组件移动至与第二容器交叠时，触发至少两个组件添加至第二容器，包括：在至少两个组件中的一个组件与第二容器交叠时，触发至少两个组件添加至第二容器。
在一些实施例中，在至少两个组件中的至少一个组件移动至与第二容器交叠时，触发至少两个组件添加至第二容器，包括：在至少两个组件中的两个或两个以上组件与第二容器交叠时，触发至少两个组件添加至第二容器。
在一些实施例中，在至少两个组件中的至少一个组件移动至与第二容器交叠时，触发至少两个组件添加至第二容器，包括：在至少两个组件均移动至与第二容器交叠时，触发至少两个组件添加至第二容器。
进一步的，在一些实施例中，在至少两个组件均移动至与第二容器交叠时，响应于停止拖动输入，触发至少两个组件添加至第二容器。
相应的，在至少两个组件均与第二容器未交叠时，则停止拖动输入后，至少两个组件不添加至第二容器，保持原始位置不变。
本公开实施例提供的多组件跨容器的控制方法，在编辑器页面中，可以通过针对第一容器的至少两个组件的输入，选中该至少两个组件，并通过针对该至少两个组件的选中框的拖动输入，控制该至少两个组件在画布区域内移动，在该至少两个组件中的至少一个组件移动至与第二容器交叠时，可以触发将该至少两个组件移动至第二容器，如此可以实现该至少两个组件跨容器(即从第一容器到第二容器)的移动，这样在编辑器页面中进行显示页面的编辑设计过程时可以实现灵活的页面编辑。
本公开实施例中，第二容器可以为第一容器的父容器，或者第二容器可以为第一容器的子容器，下面将这两种情况分别进行介绍。
(情况一)第二容器为第一容器的父容器：
本公开实施例提供的方法还包括：响应于针对选中框的拖动输入，在满足第一条件时，触发以响应样式显示第二容器的边界。
本公开实施例中，在非响应样式下可以不显示第二容器的边界，在响应样式下，显示第二容器的边界；或者，在非响应样式下正常显示第二容器的边界，在响应样式下，突出显示第二容器的边界。
本公开实施例所涉及的各个附图中，针对容器的边界的显示，采用虚线标识非响应样式，采用实线标识响应样式。
其中，第一条件包括以下(1)和(2)的至少一种：
(1)选中光标从第一容器内部移出；
(2)至少两个组件中的至少一个组件移动至与第一容器的边界交叠。
可选的，上述第一条件还可以包括但不限于以下几种：
选中框从第一容器内部移出；
选中光标从第二容器外部移入第二容器内部；
需要说明的是，上述第一条件的说明仅为示例性的说明，实际应用中还可以设置其它触发以响应样式显示第二容器的条件。
如图4所示，为一种编辑器页面的示意图，图4中，选中框S中白色方块A和黑色方块B移动后，白色方块A与导航栏子容器1交叠，但是选中光标T未从第一容器内部移出，满足上述条件(2)，此时可以通过响应样式显示轮播子容器1。
如图5所示，为一种编辑器页面的示意图，图5中，选中框S中白色方块A和黑色方块B移动后，白色方块A与导航栏子容器1交叠，并且选中光标T从第一容器内部移出，满足上述条件(1)和(2)，此时也可以以响应样式显示轮播子容器1。
上述实施例中，在针对选中框的拖动，将组件拖动至即将进入第二容器时，将第二容器采用响应样式进行显示，可以提示进行页面编辑的用户，当前即将进入第二容器，以方便用户观察拖动过程的进程。
在一些实施例中，第二容器为第一容器的父容器；本公开实施例提供的方法包括：响应于针对选中框的拖动输入，至少两个组件在画布区域内移动，至少两个组件中的至少一个组件移动至与第一容器的边界交叠之后，在至少两个组件中的至少一个组件移动至与第二容器交叠时，触发至少两个组件添加至第二容器。
如图6所示，为一种拖动输入过程中编辑器页面的示意图，如图6中的(a)所示，响应于针对选中框S的拖动输入，白色方块A与黑色方块B在画布区域内移动，移动到白色方块A与轮播子容器1的边界交叠，此时图6中的(a)中导航栏子容器1以响应样式显示，进一步的按照图中箭头所示方向拖动选中框S之后，如图6中的(b)所示，白色方块A与黑色方块B均与第二容器交叠，此时可以触发白色方块A与黑色方块B添加至导航栏子容器1中，在白色方块A与黑色方块B添加至导航栏子容器1中之后，如图6中的(c)所示，在轮播子容器1的选项下取消显示白色方块A与黑色方块B的选项，以及在导航栏子容器1的选项下增加显示白色方块A与黑色方块B的选项，导航栏子容器1切换至非响应样式显示。
进一步的，如图7所示，在白色方块A与黑色方块B均与导航栏子容器1交叠，并且显示在白色方块A与黑色方块B的选中框S内的选中光标T也处于导航栏子容器1内，此时可以触发白色方块A与黑色方块B添加至导航栏子容器1。
(情况二)第二容器为第一容器的子容器。
其中，本公开实施例中所涉及的至少两个组件与第二容器为同级关系，且至少两个组件与第二容器在面积上不交叠。
示例性的，如图8所示，为一种编辑器页面的示意图，如8中，组件白色方块A与黑色方块B与轮播子容器1为同级关系，轮播子容器1为导航栏子容器1的子容器，并且白色方块A与黑色方块B均与轮播子容器1在面积上无交叠。
本公开实施例提供的方法还包括：响应于针对选中框的拖动输入，在满足第二条件时，触发以响应样式显示第二容器的边界。
其中，上述第二条件包括以下(3)和(4)的至少一种：
(3)选中光标移动至第二容器内部；
(4)至少两个组件中的至少一个组件移动至与第二容器的边界交叠。
如图9所示，为一种编辑器页面的示意图，图9中，选中框S中白色方块A和黑色方块B移动后，黑色方块B与轮播子容器1交叠，但是选中光标T未移动到轮播子容器1内部，满足上述条件(4)，此时可以以响应样式显示轮播子容器1。
如图10所示，为一种编辑器页面的示意图，图10中，选中框S中白色方块A和黑色方块B移动后，黑色方块A与轮播子容器1交叠，并且选中光标T移动到轮播子容器1内部，满足上述条件(3)和(4)，此时也可以以响应样式显示轮播子容器1。
上述实施例中，在针对选中框的拖动，将组件拖动至即进入第二容器时，将第二容器采用响应样式进行显示，可以提示进行页面编辑的用户，当前进入第二容器，以方便用户观察拖动过程的进程。
如图11所示，为一种拖动输入过程中编辑器页面的示意图，如图11中的(a)所示，响应于针对选中框S的拖动输入，白色方块A与黑色方块B在画布区域内移动，移动到白色方块A以及黑色方块B均与轮播子容器1交叠，此时如图11中的(b)所示，轮播子容器1以响应样式显示，并且此时可以触发白色方块A与黑色方块B添加至导航栏子容器1中，在白色方块A与黑色方块B添加至导航栏子容器1中之后，如图11中的(c)所示，在导航栏子容器1的选项下取消显示白色方块A与黑色方块B的选项，以及在轮播子容器1的选项下增加显示白色方块A与黑色方块B的选项，轮播子容器1切换至非响应样式显示。
进一步的，如图12所示，在白色方块A与黑色方块B均与轮播子容器1交叠，并且显示在白色方块A与黑色方块B的选中框S内的选中光标T也处于轮播子容器1内，此时可以触发白色方块A与黑色方块B添加至轮播子容器1。
在上述103之后，针对图层结构区域的显示方式可以包括：
一种实现方式中，取消显示第一容器的选项下的至少两个组件的选项，以及在第二容器的选项下增加显示至少两个组件的选项。如上述图6中的(c)所示，或者如上图11中的(c)所示。该实现方式中实现的是多组件的跨容器移动。
另一种实现方式中，不取消显示第一容器的选项下的至少两个组件的选项，以及在第二容器的选项下增加显示至少两个组件的选项。该实现方式中实现的是多组件的跨容器复制。
本公开实施例的上述方案，针对父容器下组件向子容器移动的场景，以及子容器下组件向父容器移动的场景均进行了介绍，在两种场景下均可以采用本发明实施例提供的方法，实现多组件的跨容器移动，这样在进行显示页面的编辑设计过程时，针对这两种场景均可以灵活的进行跨容器的移动和复制组件，提高编辑设计过程的效率。
如图13所示，提供一种多组件跨容器的控制装置，包括：
显示模块1301，用于显示编辑页面，所述编辑页面中包括画布区域，所述画布区域内显示第一容器中的多个组件；
控制模块1302，用于响应于针对所述多个组件中至少两个组件的拖动输入，在所述至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将所述至少两个组件添加至所述第二容器中，所述第二容器为所述第一容器的子容器或者父容器。
作为本公开实施例一种可选的实施方式，控制模块1302，还用于，
响应于针对所述至少两个组件的选中输入，显示用于框选所述至少两个组件的选中框，在所述选中框内显示选中光标；
所述控制模块1302，具体用于：在所述至少两个组件中的至少一个组件与第二容器存在交叠，且所述选中光标处于所述第二容器之内时，触发所述至少两个组件添加至所述第二容器。
作为本公开实施例一种可选的实施方式，第二容器为第一容器的父容器，控制模块1302，还用于：
响应于针对所述至少两个组件的拖动输入，在满足第一条件时，触发以响应样式显示第二容器的边界；
第一条件包括：
选中光标从第一容器内部移出；
和/或，
至少两个组件中的至少一个组件移动至与第一容器的边界交叠。
作为本公开实施例一种可选的实施方式，第二容器为第一容器的父容器；
控制模块1302，还用于：
至少两个组件中的至少一个组件移动至与第一容器的边界交叠。
作为本公开实施例一种可选的实施方式，第二容器为第一容器的子容器，至少两个组件与第二容器为同级关系，且至少两个组件与第二容器在面积上不交叠，控制模块1302，还用于：
响应于针对至少两个组件的拖动输入，在满足第二条件时，触发以响应样式显示第二容器的边界；
第二条件包括：
选中光标移动至第二容器内部；
和/或，
至少两个组件中的至少一个组件移动至与第二容器的边界交叠。
作为本公开实施例一种可选的实施方式，控制模块1302，具体用于：
在所述至少两个组件均移动至与所述第二容器交叠的情况下，响应于停止所述拖动输入，将所述至少两个组件添加至所述第二容器中。
如图14所示，本公开实施例还提供一种电子设备，包括：处理器1401、存储器1402及存储在存储器1402上并可在处理器1401上运行的计算机程序，计算机程序被处理器1401执行时实现方法实施例中的多组件跨容器的控制方法。
本公开实施例提供一种计算机可读存储介质，包括：计算机可读存储介质上存储计算机程序，计算机程序被处理器执行时实现方法实施例中的多组件跨容器的控制方法。
本公开实施例提供一种计算机程序产品，包括：当计算机程序产品在计算机上运行时，使得计算机实现方法实施例中的多组件跨容器的控制方法。
本领域技术人员应明白，本公开的实施例可提供为方法、系统、或计算机程序产品。因此，本公开可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本公开可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质上实施的计算机程序产品的形式。
本公开中，处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
本公开中，存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
本公开中，计算机可读介质包括永久性和非永久性、可移动和非可移动存储介质。存储介质可以由任何方法或技术来实现信息存储，信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。根据本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上仅是本公开的具体实施方式，使本领域技术人员能够理解或实现本公开。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本公开的精神或范围的情况下，在其它实施例中实现。因此，本公开将不会被限制于本文的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种多组件跨容器的控制方法，其特征在于，包括：
显示编辑页面，所述编辑页面中包括画布区域，所述画布区域内显示第一容器中的多个组件；
响应于针对所述多个组件中至少两个组件的拖动输入，在所述至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将所述至少两个组件添加至所述第二容器中，所述第二容器为所述第一容器的子容器或者父容器。
2.根据权利要求1所述的方法，其特征在于，所述显示编辑页面之后，所述响应于针对所述多个组件中至少两个组件的拖动输入之前，所述方法还包括：
响应于针对所述至少两个组件的选中输入，显示用于框选所述至少两个组件的选中框，在所述选中框内显示选中光标；
所述在所述至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将所述至少两个组件添加至所述第二容器中，包括：
在所述至少两个组件中的至少一个组件与第二容器存在交叠，且所述选中光标处于所述第二容器之内时，将所述至少两个组件添加至所述第二容器。
3.根据权利要求2所述的方法，其特征在于，所述第二容器为所述第一容器的父容器，所述方法还包括：
响应于针对所述至少两个组件的拖动输入，在满足第一条件时，触发以响应样式显示所述第二容器的边界；
所述第一条件包括：
所述选中光标从所述第一容器内部移出；
和/或，
所述至少两个组件中的至少一个组件移动至与所述第一容器的边界交叠。
4.根据权利要求1所述的方法，其特征在于，所述第二容器为所述第一容器的父容器；
所述在所述至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将所述至少两个组件添加至所述第二容器中之前，还包括：
所述至少两个组件中的至少一个组件移动至与所述第一容器的边界交叠。
5.根据权利要求2所述的方法，其特征在于，所述第二容器为所述第一容器的子容器，所述至少两个组件与所述第二容器为同级关系，且所述至少两个组件与所述第二容器不交叠，所述方法还包括：
响应于针对所述至少两个组件的拖动输入，在满足第二条件时，触发以响应样式显示所述第二容器的边界；
所述第二条件包括：
所述选中光标移动至所述第二容器内部；
和/或，
所述至少两个组件中的至少一个组件移动至与所述第二容器的边界交叠。
6.根据权利要求1所述的方法，其特征在于，所述在所述至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将所述至少两个组件添加至所述第二容器中，包括：
在所述至少两个组件均与所述第二容器交叠的情况下，响应于停止所述拖动输入，将所述至少两个组件添加至所述第二容器中。
7.一种多组件跨容器的控制装置，其特征在于，包括：
显示模块，用于显示编辑页面，所述编辑页面中包括画布区域，所述画布区域内显示第一容器中的多个组件；
控制模块，用于响应于针对所述多个组件中至少两个组件的拖动输入，在所述至少两个组件中的至少一个组件与第二容器存在交叠的情况下，将所述至少两个组件添加至所述第二容器中，所述第二容器为所述第一容器的子容器或者父容器。
8.一种电子设备，其特征在于，包括：处理器、存储器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至6中任一项所述的多组件跨容器的控制方法。
9.一种计算机可读存储介质，其特征在于，包括：所述计算机可读存储介质上存储计算机程序，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述的多组件跨容器的控制方法。
10.一种计算机程序产品，其特征在于，包括：当所述计算机程序产品在计算机上运行时，使得所述计算机实现权利要求1至6任一项所述的多组件跨容器的控制方法。
CN202111265343.7A 2021-10-28 2021-10-28 多组件跨容器的控制方法、装置及电子设备 Pending CN116048320A (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202111265343.7A CN116048320A (zh) 2021-10-28 2021-10-28 多组件跨容器的控制方法、装置及电子设备
PCT/CN2022/113408 WO2023071448A1 (zh) 2021-10-28 2022-08-18 多组件跨容器的控制方法、装置及电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111265343.7A CN116048320A (zh) 2021-10-28 2021-10-28 多组件跨容器的控制方法、装置及电子设备

Publications (1)

Publication Number Publication Date
CN116048320A true CN116048320A (zh) 2023-05-02

Family

ID=86115127

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111265343.7A Pending CN116048320A (zh) 2021-10-28 2021-10-28 多组件跨容器的控制方法、装置及电子设备

Country Status (2)

Country Link
CN (1) CN116048320A (zh)
WO (1) WO2023071448A1 (zh)

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103440131B (zh) * 2013-08-30 2016-06-29 四川九洲电器集团有限责任公司 一种基于安卓系统的移动终端触摸屏视图布局调整方法
CN108415706B (zh) * 2018-03-14 2021-07-06 上海携程商务有限公司 可视化网页生成的方法、系统、设备及存储介质
US10678521B1 (en) * 2018-12-05 2020-06-09 Bank Of America Corporation System for image segmentation, transformation and user interface component construction
CN111966345A (zh) * 2020-08-21 2020-11-20 西安寰宇卫星测控与数据应用有限公司 拖拽式网页设计方法、装置、计算机设备、存储介质
CN113076105B (zh) * 2021-06-08 2021-08-24 知学云(北京)科技股份有限公司 一种面向在线教育的组件化页面渲染方法、系统及存储器

Also Published As

Publication number Publication date
WO2023071448A1 (zh) 2023-05-04

Similar Documents

Publication Publication Date Title
CN110058856B (zh) 页面配置方法及装置
US8156445B2 (en) Controlled interaction with heterogeneous data
KR102127063B1 (ko) 하이브리드 애플리케이션에서의 ListCell 재사용 방법 및 장치
US20140177978A1 (en) Apparatus for simultaneously storing area selected in image and apparatus for creating an image file by automatically recording image information
CN106933887B (zh) 一种数据可视化方法及装置
CN104077387A (zh) 一种网页内容显示方法和浏览器装置
JP2015194808A (ja) 情報処理装置及び情報処理プログラム
CN110018984A (zh) 一种文件格式的转换方法及装置
CN116048320A (zh) 多组件跨容器的控制方法、装置及电子设备
CN111506306B (zh) 一种Ansible剧本编写方法、装置和电子设备
CN107391144B (zh) 视图展示方法及装置
CN107818000B (zh) 一种页面表格的操作方法及装置
CN111209009A (zh) 内容发布方法及装置、存储介质及电子设备
CN115203031A (zh) 一种自动驾驶自动泛化仿真测试方法及装置
CN116414731A (zh) 一种特效编辑方法及装置
CN111866597B (zh) 控制视频中页面元素的布局的方法、系统及存储介质
CN108984247B (zh) 一种信息展示方法及其终端设备和网络设备
US20190073436A1 (en) Dynamic preview generation in a product lifecycle management environment
CN116823999B (zh) 一种基于图片识别的交互方法、设备及介质
CN112083859B (zh) 多页面数据聚合处理方法和装置
CN111160584B (zh) 车载网络设备维护方法及装置
CN116309940B (zh) 一种基于动画弹窗组件的地图信息显示方法、设备及介质
CN115390837A (zh) 一种搭建后台功能的方法及设备
KR20130020380A (ko) 터치 스크린을 구비한 단말에서의 웹 컨텐츠 편집을 위한 기록 매체
US20230066583A1 (en) Information reply method, apparatus, electronic device, readable storage medium and program product

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination