CN117215581A - 基于React的界面元素布局方法、装置、介质及电子设备 - Google Patents

Abstract

本申请的实施例提供了一种基于React的界面元素布局方法、装置、介质及电子设备。该方法包括：调用预先通过容器封装的拖放组件，所述拖放组件定义有拖动属性和/或放置属性；通过所述拖放组件渲染至少一个用于展示业务数据的元素框，各个所述元素框分别配置有拖放控件；在客户端界面中展示各个元素框；响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式。本申请实施例的技术方案可以提高基于React的界面元素布局的便捷性和交互友好性，增强用户体验。

Description

基于React的界面元素布局方法、装置、介质及电子设备

技术领域

本申请涉及计算机及数据处理技术领域，具体而言，涉及一种基于React的界面元素布局方法、装置、介质及电子设备。

背景技术

React是一套用于构建用户界面的Javascript库，React只关注视图层，采用自底向上增量开发的设计。在React中，当需要对界面中的元素进行布局时，针对不同布局场景(比如排序，分类等场景)，通常需要开发不同的代码，导致实现界面元素布局的过程变得复杂。基于此，如何提高基于React的界面元素布局的便捷性和交互友好性，增强用户体验是亟待解决的技术问题。

发明内容

本申请的实施例提供了一种基于React的界面元素布局方法、装置、计算机程序产品或计算机程序、计算机可读存储介质及电子设备，进而至少在一定程度上可以提高基于React的界面元素布局的便捷性和交互友好性，增强用户体验。

本申请的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本申请的实践而习得。

根据本申请实施例的一个方面，提供了一种基于React的界面元素布局方法，所述方法包括：调用预先通过容器封装的拖放组件，所述拖放组件定义有拖动属性和/或放置属性；通过所述拖放组件渲染至少一个用于展示业务数据的元素框，各个所述元素框分别配置有拖放控件；在客户端界面中展示各个元素框；响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式。

在本申请的一些实施例中，基于前述方案，所述拖放组件包括第一拖放组件，第二拖放组件，以及第三拖放组件，所述第一拖放组件同时定义有拖动属性和放置属性，所述第二拖放组件定义有拖动属性，所述第三拖放组件定义有放置属性。

在本申请的一些实施例中，基于前述方案，在针对所述元素框的排序场景中，所述拖放组件为所述第一拖放组件。

在本申请的一些实施例中，基于前述方案，在针对所述元素框的排序场景中，所述响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式，包括：响应于用户拖动目标拖放控件并放置至客户端界面中特定区域的操作，通过所述第一拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面各个元素框中的排序位置。

在本申请的一些实施例中，基于前述方案，在针对所述元素框的分类场景中，所述拖放组件为所述第二拖放组件和所述第三拖放组件。

在本申请的一些实施例中，基于前述方案，在针对所述元素框的分类场景中，所述响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式，包括：响应于用户拖动目标拖放控件的操作，通过所述第二拖放组件在所述客户端界面拖动所述目标拖放控件对应的目标元素框；响应于用户将目标拖放控件放置至客户端界面中特定区域的操作，通过所述第三拖放组件在所述客户端界面中对所述目标拖放控件对应的目标元素框进行分类。

在本申请的一些实施例中，基于前述方案，在调用预先通过容器封装的拖放组件之前，所述方法还包括：响应于用户在客户端触发的业务数据展示指令，从服务端下载对应的业务数据；按照预先配置的分类规则，对所述业务数据进行分类，得到至少一组业务数据，其中，所述至少一组业务数据分别展示在由所述拖放组件渲染的至少一个元素框中。

根据本申请实施例的一个方面，提供了一种基于React的界面元素布局装置，所述装置包括：调用单元，用于调用预先通过容器封装的拖放组件，所述拖放组件定义有拖动属性和/或放置属性；渲染单元，用于通过所述拖放组件渲染至少一个用于展示业务数据的元素框，各个所述元素框分别配置有拖放控件；展示单元，用于在客户端界面中展示各个元素框；调整单元，用于响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式。

根据本申请实施例的一个方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述实施例中所述的方法。

根据本申请实施例的一个方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述实施例中所述的方法。

根据本申请实施例的一个方面，提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上述实施例中所述的方法。

在本申请的一些实施例所提供的技术方案中，由于在系统中配置有定义了拖动属性和/或放置属性的拖放组件，使得用户在需要对界面中的元素进行布局时，只需要调用定义有拖动属性和/或放置属性的拖放组件，就能实现调整界面中的元素在客户端界面中的布局形式，进而可以降低界面元素布局的复杂程度，提高界面元素布局的便捷性和交互友好性，增强用户体验。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1示出了可以应用本申请实施例的技术方案的系统架构图；

图2示出了根据本申请一个实施例的基于React的界面元素布局方法的流程图；

图3示出了根据本申请一个实施例的基于React的界面元素布局的界面图；

图4示出了根据本申请一个实施例的基于React的界面元素布局的界面图；

图5示出了根据本申请一个实施例的基于React的界面元素布局的界面图；

图6示出了根据本申请一个实施例的基于React的界面元素布局装置的框图；

图7示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本申请将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本申请的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本申请的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本申请的各方面。

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。

需要说明的是：在本文中提及的“多个/组”是指两个/组或两个/组以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

图1示出了可以应用本申请实施例的技术方案的系统架构图。

如图1所示，系统架构可以包括终端设备(如图1中所示智能手机101、平板电脑102和便携式计算机103中的一种或多种，当然也可以是台式计算机等等，但并不局限于此，本申请在此不做限制)、网络104和服务端105。网络104用以在终端设备和服务端105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线通信链路、无线通信链路等等。

需要说明的是，本申请实施例所提供的基于React的界面元素布局方法可以由终端设备执行，相应地，基于React的界面元素布局装置一般设置于终端设备中。

以下对本申请实施例的技术方案的实现细节进行详细阐述：

图2示出了根据本申请一个实施例的基于React的界面元素布局方法的流程，该基于React的界面元素布局方法可以由具有计算处理功能的设备来执行，比如可以由图1中所示的终端设备来执行。参照图2所示，该基于React的界面元素布局方法至少包括步骤200至步骤230，详细介绍如下：

步骤200，调用预先通过容器封装的拖放组件，所述拖放组件定义有拖动属性和/或放置属性。

步骤210，通过所述拖放组件渲染至少一个用于展示业务数据的元素框，各个所述元素框分别配置有拖放控件。

步骤220，在客户端界面中展示各个元素框。

步骤230，响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式。

在本申请中，拖放组件(比如DragDropBox组件)可以是一种基于多种表单控件的组合使用，通过拖放组件可以大大减少代码开发量，只需较少的配置项，就能配置出网页上的含有查询逻辑、动态交互的元素。，可以预先通过容器将拖放组件进行封装，以增强拖放组件的功能完整性。

在本申请中，可以通过交互组件实现与元素的动态交互，交互组件是接收用户输入(例如键盘或鼠标活动)可对数据和方法进行封装从而实现某些新的功能的组件。

拖放组件和交互组件有自身的属性和方法，属性是组件数据的简单访问者，方法则是组件的一些简单而可见的功能。

进一步的，在本申请中，通过所述拖放组件渲染至少一个元素框，并为各个所述元素框分别配置拖放控件，其中，所述元素框用于放置业务数据，比如，放置数据类型为表格的业务数据，拖放控件用于用户在需要拖放元素框时与元素框进行交互。用户通过对目标拖放控件的拖放操作，可以实现调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式。

在本申请中，由于在系统中配置有定义了拖动属性和/或放置属性的拖放组件，使得用户在需要对界面中的元素进行布局时，只需要调用定义有拖动属性和/或放置属性的拖放组件，就能实现调整界面中的元素在客户端界面中的布局形式，进而可以降低界面元素布局的复杂程度，提高界面元素布局(比如基于React的界面元素布局)的便捷性和交互友好性，增强用户体验。

为了使本领域技术人员更好的理解本申请，下面结合图3至图5，以一个具体的实施例进行说明。

参照图3至图5，分别示出了根据本申请一个实施例的基于React的界面元素布局的界面图。

需要说明的是，本申请所公开的基于React的界面元素布局的界面图仅仅是为了示意界面的形式和效果，以便于本领域技术人员更好的理解本申请，其图中所涉及的具体数据无需考虑。

在本申请中，如图3所示的界面，包括4个元素框，分别是元素框302，元素框303，元素框304，元素框305，其中每一个元素框均配置有拖放控件，比如，元素框302配置有拖放控件301。

在本申请中，所述拖放组件可以包括第一拖放组件，第二拖放组件，以及第三拖放组件。

其中，所述第一拖放组件同时定义有拖动属性和放置属性，所述第二拖放组件定义有拖动属性，所述第三拖放组件定义有放置属性。

在本申请的一个实施例中，如果针对所述元素框的布局场景为排序场景，则所述拖放组件可以为所述第一拖放组件。

在本申请中，需要说明的是，对界面元素进行排序是指将界面中某一个元素拖动并放置在某一个区域时，会触发整个界面中所有元素的排列顺序，用户与界面的交互过程中的各个操作是连续的。

进一步的，在本实施例中，在针对所述元素框的排序场景中，所述响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式，可以按照如下步骤241执行：

步骤241，响应于用户拖动目标拖放控件并放置至客户端界面中特定区域的操作，通过所述第一拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面各个元素框中的排序位置。

比如，请继续参照图3至图5，用户通过点击拖放控件301，并将拖放控件301拖放至特定区域，就能实现拖动元素框302，并将元素框302放置在特定区域，进而实现改变元素框302，元素框303，元素框304，元素框305的排列顺序。

在本申请中，由于在系统中配置有定义了拖动属性和放置属性的第一拖放组件，使得用户在需要对界面中的元素进行排序时，只需要调用定义有拖动属性和放置属性的第一拖放组件，就能实现调整界面中的元素在客户端界面中的排序，进而可以降低界面元素布局的复杂程度，提高界面元素布局的便捷性和交互友好性，增强用户体验。

在本申请的一个实施例中，如果针对所述元素框的布局场景为分类场景，则所述拖放组件可以为所述第二拖放组件和所述第三拖放组件。

在本申请中，需要说明的是，对界面元素进行分类是指将界面中某一个元素拖动并放置在某一个区域时，会触发该元素与放置在该区域的其它元素聚集在该区域，而不会改变整个界面中所有元素的排列顺序，用户与界面的交互过程中的各个操作并不是连续的。

进一步的，在本实施例中，在针对所述元素框的分类场景中，所述响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式，可以按照如下步骤251至步骤252执行：

步骤251，响应于用户拖动目标拖放控件的操作，通过所述第二拖放组件在所述客户端界面拖动所述目标拖放控件对应的目标元素框。

步骤252，响应于用户将目标拖放控件放置至客户端界面中特定区域的操作，通过所述第三拖放组件在所述客户端界面中对所述目标拖放控件对应的目标元素框进行分类。

在本申请中，由于在系统中配置有定义了拖动属性的第二拖放组件和放置属性的第三拖放组件，使得用户在需要对界面中的元素进行分类时，在拖动元素时只需要调用定义有拖动属性的第二拖放组件，在放置元素时只需要调用定义有放置属性的第三拖放组件，就能实现调整界面中的元素在客户端界面中的分类，而不会改变整个界面中所有元素的排列顺序，可见，本实施例可以降低界面元素分类的复杂程度，提高界面元素布局的便捷性和交互友好性，增强用户体验。

在本申请的一个实施例中，在如图2所示步骤200之前，即在调用预先通过容器封装的拖放组件之前，还可以执行如下步骤261至步骤262：

步骤261，响应于用户在客户端触发的业务数据展示指令，从服务端下载对应的业务数据。

步骤262，按照预先配置的分类规则，对所述业务数据进行分类，得到至少一组业务数据，其中，所述至少一组业务数据分别展示在由所述拖放组件渲染的至少一个元素框中。

在本申请中，所提出的基于React的界面元素布局方案主要应用于业务数据的展示场景，因此，在执行本方案之前，即在调用预先通过容器封装的拖放组件之前，可以从服务端下载对应的业务数据，并按照预先配置的分类规则，将所述业务数据分类得到至少一组业务数据，以将所述至少一组业务数据分别展示在由所述拖放组件渲染的至少一个元素框中，进而提高业务数据的展示效率，提高业务数据的展示效果，增强用户体验。

在本申请中，需要说明的是，在本申请所提出的技术方案，通过来设计基于React的拖放组件得以实现，其思路可以参照如下几点说明：

1定义组件的基本功能(拖放场景类型、不同类型下的数据来源、标题)。

1.1定义拖放组件使用的场景类型(type)。

1.2定义拖放结束之后的可能需要处理的事件(changeOrderCallback)。

1.3定义拖放组件可能有的标题(title)。

1.4定义要拖动元素的样式类别(dragDropltemClassName)。

2采用组件封装的模式，运用react和react-dnd相结合的方式来实现组件的加载渲染，实现元素可拖动或可接受元素。

2.1将组件使用容器包裹。

2.2定义需要拖放的元素列表。

2.3对拖动的元素和要放置的元素(即接受拖动的元素)进行事件处理以及展示不同样式。

3编写组件的交互逻辑(初始化数据、拖动完成之后会产生影响的处理)。

3.1处理元素开始拖动以及拖动中的样式，处理元素拖动结束的放置位置。

3.2定义初始的changeOrderCallback方法，元素拖动结束之后，触发对应方法，并返回拖动结束之后的状态(如：新顺序，新分类)。

4将由组件传入的数据(对象数组等)在内部统一处理后集成到组件内。

4.1将数据源列表进行处理，通过type渲染成对应的拖动场景样式，调用对应的事件。

4.2将数据源列表的元素转化成组件所需要的数据结构。

5处理组件公共的默认数据、空数据以及空值的处理。

5.1对type以及数据源是否为空值的处理。

6处理拖动放置等交互操作(即用户键入和用户交互事件)。

6.1用户鼠标拖动完成之后的事件处理。

7导出用户所需要的数据参数(比如：拖动排序之后的新顺序等)。

7.1导出参数有:type、dropTargets、draggbleItems、dragDropltemClassName、title、changeOrderCallback等。

在本申请的一个实施例中，上述技术方案所涉及拖放组件的部分实现代码可以参 照如下：

1组件属性、方法类型注释。

interface DragDropBoxPropsType{

//场景类型：拖动排序或者拖动分类，默认为拖动排序

type？:'dragSort'|'dragClassify'；

//dragClassify需要可拖动list和可放置(拖动元素的目标位置)list

dropTargets？:DragTargetPropsType[]；

draggbleItems？:DraggableItemPropsType[]；

//dragSort可拖动并可以放置，只需要一个list

dragDropItems？:Omit<DragDropSelfPropsType,'index'>[]；

//可以给拖动排序的元素配置个性化样式类

dragDropItemClassName？:string；

//标题

title？:React.ReactNode；

//在拖动排序场景下可以配置排序之后要处理的事件

changeOrderCallback？:(params？:any[])＝>void；

}

2组件使用示例、拖动排序场景

<DragDropBox

title＝”

dragDropItemClassName＝”

changeOrderCallback＝{()＝>{}}

dragDropItems＝{[]}

/>

3组件使用示例、拖动分类场景

<DragDropBox

title＝”

type＝'dragClassify'

dragDropItems＝{[]}

dropTargets＝{[]}

/>

在本申请中，由于在系统中配置有定义了拖动属性和/或放置属性的拖放组件，使得用户在需要对界面中的元素进行布局时，无需重新编写代码，只需要在组装好的拖放组件中定义拖动属性和/或放置属性，就能实现调整界面中的元素在客户端界面中的布局形式，进而可以降低界面元素布局的复杂程度，提高界面元素布局(比如基于React的界面元素布局)的便捷性和交互友好性，增强用户体验。

进一步的，本申请所提供的拖放组件，通过灵活配置用户所需的属性，可以实现组件的高复用和高拓展，降低了项目开发阶段的开发难度和复杂度，使得团队开发更有效率；此外，拖放组件的封装增强了组件的功能完整性，提高了通过组件实现界面元素布局的稳定性，进一步增强了用户的交互体验。

以下介绍本申请的装置实施例，可以用于执行本申请上述实施例中的基于React的界面元素布局方法。对于本申请装置实施例中未披露的细节，请参照本申请上述的基于React的界面元素布局方法的实施例。

图6示出了根据本申请一个实施例的基于React的界面元素布局装置的框图。

参照图6所示，根据本申请一个实施例的基于React的界面元素布局装置600，包括：调用单元601、渲染单元602、展示单元603和调整单元604。

其中，调用单元601，用于调用预先通过容器封装的拖放组件，所述拖放组件定义有拖动属性和/或放置属性；渲染单元602，用于通过所述拖放组件渲染至少一个用于展示业务数据的元素框，各个所述元素框分别配置有拖放控件；展示单元603，用于在客户端界面中展示各个元素框；调整单元604，用于响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式。

在本申请的一些实施例中，基于前述方案，所述拖放组件包括第一拖放组件，第二拖放组件，以及第三拖放组件，所述第一拖放组件同时定义有拖动属性和放置属性，所述第二拖放组件定义有拖动属性，所述第三拖放组件定义有放置属性。

在本申请的一些实施例中，基于前述方案，在针对所述元素框的排序场景中，所述拖放组件为所述第一拖放组件。

在本申请的一些实施例中，基于前述方案，所述调整单元604配置为：在针对所述元素框的排序场景中，响应于用户拖动目标拖放控件并放置至客户端界面中特定区域的操作，通过所述第一拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面各个元素框中的排序位置。

在本申请的一些实施例中，基于前述方案，在针对所述元素框的分类场景中，所述拖放组件为所述第二拖放组件和所述第三拖放组件。

在本申请的一些实施例中，基于前述方案，所述调整单元604配置为：在针对所述元素框的分类场景中，响应于用户拖动目标拖放控件的操作，通过所述第二拖放组件在所述客户端界面拖动所述目标拖放控件对应的目标元素框；响应于用户将目标拖放控件放置至客户端界面中特定区域的操作，通过所述第三拖放组件在所述客户端界面中对所述目标拖放控件对应的目标元素框进行分类。

在本申请的一些实施例中，基于前述方案，所述装置还包括：分类单元，用于在调用预先通过容器封装的拖放组件之前，响应于用户在客户端触发的业务数据展示指令，从服务端下载对应的业务数据；按照预先配置的分类规则，对所述业务数据进行分类，得到至少一组业务数据，其中，所述至少一组业务数据分别展示在由所述拖放组件渲染的至少一个元素框中。

图7示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。

需要说明的是，图7示出的电子设备的计算机系统700仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图7所示，计算机系统700包括中央处理单元(Central Processing Unit，CPU)701，其可以根据存储在只读存储器(Read-Only Memory，ROM)702中的程序或者从储存部分708加载到随机访问存储器(Random Access Memory，RAM)703中的程序而执行各种适当的动作和处理，例如执行上述实施例中所述的方法。在RAM 703中，还存储有系统操作所需的各种程序和数据。CPU 701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(Input/Output，I/O)接口705也连接至总线704。

以下部件连接至I/O接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管(Cathode Ray Tube，CRT)、液晶显示器(Liquid Crystal Display，LCD)等以及扬声器等的输出部分707；包括硬盘等的储存部分708；以及包括诸如LAN(Local Area Network，局域网)卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入储存部分708。

特别地，根据本申请的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本申请的实施例包括一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该计算机程序被中央处理单元(CPU)701执行时，执行本申请的系统中限定的各种功能。

需要说明的是，本申请实施例所示的计算机可读存储介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(Erasable Programmable Read Only Memory，EPROM)、闪存、光纤、便携式紧凑磁盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读存储介质，该计算机可读存储介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。其中，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。

作为另一方面，本申请还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述实施例中所述的方法。

作为另一方面，本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现上述实施例中所述的方法。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本申请实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务端、触控终端、或者网络设备等)执行根据本申请实施方式的方法。

本领域技术人员在考虑说明书及实践这里公开的实施方式后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (10)

1.一种基于React的界面元素布局方法，其特征在于，所述方法包括：

调用预先通过容器封装的拖放组件，所述拖放组件定义有拖动属性和/或放置属性；

通过所述拖放组件渲染至少一个用于展示业务数据的元素框，各个所述元素框分别配置有拖放控件；

在客户端界面中展示各个元素框；

响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式。

2.根据权利要求1所述的方法，其特征在于，所述拖放组件包括第一拖放组件，第二拖放组件，以及第三拖放组件，所述第一拖放组件同时定义有拖动属性和放置属性，所述第二拖放组件定义有拖动属性，所述第三拖放组件定义有放置属性。

3.根据权利要求2所述的方法，其特征在于，在针对所述元素框的排序场景中，所述拖放组件为所述第一拖放组件。

4.根据权利要求3所述的方法，其特征在于，在针对所述元素框的排序场景中，所述响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式，包括：

响应于用户拖动目标拖放控件并放置至客户端界面中特定区域的操作，通过所述第一拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面各个元素框中的排序位置。

5.根据权利要求2所述的方法，其特征在于，在针对所述元素框的分类场景中，所述拖放组件为所述第二拖放组件和所述第三拖放组件。

6.根据权利要求5所述的方法，其特征在于，在针对所述元素框的分类场景中，所述响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式，包括：

响应于用户拖动目标拖放控件的操作，通过所述第二拖放组件在所述客户端界面拖动所述目标拖放控件对应的目标元素框；

响应于用户将目标拖放控件放置至客户端界面中特定区域的操作，通过所述第三拖放组件在所述客户端界面中对所述目标拖放控件对应的目标元素框进行分类。

7.根据权利要求1至6任一项所述的方法，其特征在于，在调用预先通过容器封装的拖放组件之前，所述方法还包括：

响应于用户在客户端触发的业务数据展示指令，从服务端下载对应的业务数据；

按照预先配置的分类规则，对所述业务数据进行分类，得到至少一组业务数据，其中，所述至少一组业务数据分别展示在由所述拖放组件渲染的至少一个元素框中。

8.一种基于React的界面元素布局装置，其特征在于，所述装置包括：

调用单元，用于调用预先通过容器封装的拖放组件，所述拖放组件定义有拖动属性和/或放置属性；

渲染单元，用于通过所述拖放组件渲染至少一个用于展示业务数据的元素框，各个所述元素框分别配置有拖放控件；

展示单元，用于在客户端界面中展示各个元素框；

调整单元，用于响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有至少一条程序代码，所述至少一条程序代码由处理器加载并执行以实现如权利要求1至7任一项所述的方法所执行的操作。

10.一种电子设备，其特征在于，所述电子设备包括一个或多个处理器和一个或多个存储器，所述一个或多个存储器中存储有至少一条程序代码，所述至少一条程序代码由所述一个或多个处理器加载并执行以实现如权利要求1至7任一项所述的方法所执行的操作。