CN112764654B - 组件的吸附操作方法、装置、终端及存储介质 - Google Patents

Abstract

本公开关于一种组件的吸附操作方法、装置、终端及存储介质，涉及网络技术领域。方法包括：展示组件编辑界面，组件编辑界面包括多个可编辑的组件；响应于对组件编辑界面中的第一组件的拖拽操作，确定第一组件待吸附的至少一个第二组件；对于每个第二组件，基于第一组件的当前位置和第二组件的当前位置，确定第一组件与第二组件之间的距离；基于拖拽操作的移动速度和第一组件与每个第二组件之间的距离，从至少一个第二组件中确定目标组件；将第一组件与目标组件进行吸附。当用户想要将两个组件进行吸附时，可以对其中一个组件进行拖拽，以及改变拖拽操作的移动速度，这样就不需要借助于键盘来操作，从而提高了组件编辑的操作效率。

Description

组件的吸附操作方法、装置、终端及存储介质

技术领域

本公开涉及网络技术领域，尤其涉及组件的吸附操作方法、装置、终端及存储介质。

背景技术

目前，web网页支持组件编辑功能，其中，对组件进行编辑时，一般是借助于鼠标来完成。然而由于鼠标的操作精准度不高，因此，在通过鼠标对组件进行编辑的过程中，需要为该组件提供辅助功能。例如，当用户通过鼠标拖拽某个组件时，当该组件与当前界面中的其他组件之间的距离较近时，可以为该组件提供吸附功能，也即将该组件与该其他组件吸附在一起，从而不需要用户频繁拖拽该组件，以实现将该组件与该其他组件吸附。

相关技术中，在用户通过鼠标对组件进行拖拽的过程中，终端实时计算该组件与当前界面中的其他组件之间的距离，响应于该组件与该其他组件之间的距离小于预设距离，则将该组件和该其他组件吸附在一起。

在上述相关技术中，只要该组件与其他组件之间的距离小于预设距离，终端就将这两个组件吸附在一起，然而当用户希望将这两个组件靠近但不吸附，此时用户就需要借助于键盘的方向键来实现，从而导致操作效率低。

发明内容

本公开提供一种组件的吸附操作方法、装置、终端及存储介质，提高了组件编辑的操作效率。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种组件的吸附操作方法，包括：

展示组件编辑界面，所述组件编辑界面包括多个可编辑的组件；

响应于对所述组件编辑界面中的第一组件的拖拽操作，确定所述第一组件待吸附的至少一个第二组件；

对于每个第二组件，基于所述第一组件的当前位置和所述第二组件的当前位置，确定所述第一组件与所述第二组件之间的距离；

基于所述拖拽操作的移动速度和所述第一组件与每个第二组件之间的距离，从所述至少一个第二组件中确定目标组件；

将所述第一组件与所述目标组件进行吸附。

在一些实施例中，所述确定所述第一组件待吸附的至少一个第二组件包括：

基于所述拖拽操作的移动方向，从所述组件编辑界面中确定所述第一组件待吸附的至少一个第二组件。

在一些实施例中，所述基于所述拖拽操作的移动速度和所述第一组件与每个第二组件之间的距离，从所述至少一个第二组件中确定所述目标组件包括：

在所述拖拽操作的移动速度不大于第一速度阈值的情况下，基于所述第一组件与每个第二组件之间的距离，从所述至少一个第二组件中，确定距离不大于距离阈值的目标组件。

在一些实施例中，所述方法还包括：

在所述拖拽操作的移动速度不大于所述第一速度阈值，且大于第二速度阈值的情况下，响应于所述拖拽操作的移动速度降低，将所述第一组件和所述目标组件脱离吸附状态，以及将所述拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动所述第一组件。

在一些实施例中，所述方法还包括：

在所述拖拽操作的移动速度不大于第二速度阈值的情况下，将所述拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动所述第一组件；

响应于所述拖拽操作的移动方向改变，且所述第一组件与所述目标组件之间的距离增大至大于距离阈值，基于所述拖拽操作的移动速度，移动所述第一组件。

在一些实施例中，所述方法还包括：

在所述拖拽操作的移动速度大于所述第一速度阈值的情况下，基于所述拖拽操作的移动速度，移动所述第一组件。

在一些实施例中，所述方法还包括：

在所述组件编辑界面中确定提示区域，在所述提示区域内显示所述第一组件与所述目标组件之间的距离。

在一些实施例中，所述方法还包括：

运行渲染线程，通过所述渲染线程，执行所述展示所述组件编辑界面的步骤；

运行计算线程，通过所述计算线程，执行所述确定所述第一组件待吸附的至少一个第二组件；对于每个第二组件，基于所述第一组件的当前位置和所述第二组件的当前位置，确定所述第一组件与所述第二组件之间的距离；基于所述拖拽操作的移动速度和所述第一组件与每个第二组件之间的距离，从所述至少一个第二组件中确定所述目标组件的步骤。

在一些实施例中，所述运行计算线程包括：

响应于当前终端支持多线程工具，通过运行所述多线程工具的脚本文件，创建所述计算线程，运行所述计算线程；

响应于所述当前终端不支持所述多线程工具，通过所述当前终端与服务器之间的通信连接，借助于所述服务器运行所述计算线程。

根据本公开实施例的第二方面，提供一种组件的吸附操作装置，包括：

展示单元，被配置为执行展示组件编辑界面，所述组件编辑界面包括多个可编辑的组件；

第一确定单元，被配置为执行响应于对所述组件编辑界面中的第一组件的拖拽操作，确定所述第一组件待吸附的至少一个第二组件；

第二确定单元，被配置为执行对于每个第二组件，基于所述第一组件的当前位置和所述第二组件的当前位置，确定所述第一组件与所述第二组件之间的距离；

第三确定单元，被配置为执行基于所述拖拽操作的移动速度和所述第一组件与每个第二组件之间的距离，从所述至少一个第二组件中确定目标组件；

吸附单元，被配置为执行将所述第一组件与所述目标组件进行吸附。

在一些实施例中，所述第一确定单元被配置为执行基于所述拖拽操作的移动方向，从所述组件编辑界面中确定所述第一组件待吸附的至少一个第二组件。

在一些实施例中，所述第三确定单元，被配置为执行在所述拖拽操作的移动速度不大于第一速度阈值的情况下，基于所述第一组件与每个第二组件之间的距离，从所述至少一个第二组件中，确定距离不大于距离阈值的目标组件。

在一些实施例中，所述装置还包括：

移动单元，被配置为执行在所述拖拽操作的移动速度不大于所述第一速度阈值，且大于第二速度阈值的情况下，响应于所述拖拽操作的移动速度降低，将所述第一组件和所述目标组件脱离吸附状态，以及将所述拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动所述第一组件。

在一些实施例中，所述装置还包括：

所述移动单元，被配置为执行在所述拖拽操作的移动速度不大于第二速度阈值的情况下，将所述拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动所述第一组件；

所述移动单元，被配置为执行响应于所述拖拽操作的移动方向改变，且所述第一组件与所述目标组件之间的距离增大至大于距离阈值，基于所述拖拽操作的移动速度，移动所述第一组件。

在一些实施例中，所述装置还包括：

所述移动单元，被配置为执行在所述拖拽操作的移动速度大于所述第一速度阈值的情况下，基于所述拖拽操作的移动速度，移动所述第一组件。

在一些实施例中，所述装置还包括：

提示单元，被配置为执行在所述组件编辑界面中确定提示区域，在所述提示区域内显示所述第一组件与所述目标组件之间的距离。

在一些实施例中，所述装置还包括：

第一运行单元，被配置为执行运行渲染线程，通过所述渲染线程，展示所述组件编辑界面；

第二运行单元，被配置为执行运行计算线程，通过所述计算线程，确定所述第一组件待吸附的至少一个第二组件；对于每个第二组件，基于所述第一组件的当前位置和所述第二组件的当前位置，确定所述第一组件与所述第二组件之间的距离；基于所述拖拽操作的移动速度和所述第一组件与每个第二组件之间的距离，从所述至少一个第二组件中确定所述目标组件。

在一些实施例中，所述第二运行单元，被配置为执行响应于当前终端支持多线程工具，通过运行所述多线程工具的脚本文件，创建所述计算线程，运行所述计算线程；响应于所述当前终端不支持所述多线程工具，通过所述当前终端与服务器之间的通信连接，借助于所述服务器运行所述计算线程。

根据本公开实施例的第三方面，提供一种终端，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如上述实施例所述的组件的吸附操作方法。

根据本公开实施例的第四方面，提供一种计算机可读存储介质，当所述计算机可读存储介质中的指令由终端的处理器执行时，使得终端能够执行如上述实施例所述的组件的吸附操作方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序/指令，所述计算机程序/指令被处理器执行时实现上述实施例所述的组件的吸附操作方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

在本公开实施例中，当用户想要将两个组件进行吸附时，可以对其中一个组件进行拖拽，对于被拖拽的组件，先确定该组件待吸附的至少一个组件，再基于拖拽操作的移动速度以及该组件与待吸附的每个组件之间的距离来确定最终要吸附的目标组件，这样当用户的意图是触发终端将该组件与目标组件吸附在一起时，只需要改变拖拽操作的移动速度即可实现，这样就不需要借助于键盘来操作，从而提高了组件编辑的操作效率。

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

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种组件的吸附操作方法的实施环境图。

图2是根据一示例性实施例示出的一种组件的吸附操作方法的流程图。

图3是根据一示例性实施例示出的一种组件的吸附操作方法的流程图。

图4是根据一示例性实施例示出的一种组件的吸附操作方法的示意图。

图5是根据一示例性实施例示出的一种组件的吸附操作方法的示意图。

图6是根据一示例性实施例示出的一种组件的吸附操作方法的示意图。

图7是根据一示例性实施例示出的一种组件的吸附操作方法的示意图。

图8是根据一示例性实施例示出的一种组件的吸附操作方法的示意图。

图9是根据一示例性实施例示出的一种组件的吸附操作方法的流程图。

图10是根据一示例性实施例示出的一种组件的吸附操作装置的框图。

图11是一示例性实施例示出的一种终端的框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

本公开所涉及的用户信息可以为经用户授权或者经过各方充分授权的信息。

图1是根据一示例性实施例示出的一种组件的吸附操作方法的实施环境图，参见图1，该实施环境包括：终端10和服务器20。终端10与服务器20通过网络进行通信。

终端10中安装有与服务器20关联的目标应用程序，通过该目标应用程序与服务器20进行数据交互。例如，终端10基于该目标应用程序，从服务器20中获取多个可编辑的组件，进而展示包括多个可编辑组件的组件编辑界面，由用户对多个可编辑的组件进行编辑，例如，用户可以拖动某个组件、改变组件的形状、编辑组件内显示的内容。另外，在用户对组件进行编辑的过程中，终端10还可以为组件提供辅助操作，该辅助操作包括吸附操作或者添加辅助线等，在本公开实施例中，以组件的吸附操作为例进行说明。

该目标应用程序可以为任一能够进行组件编辑的应用程序；例如，该目标应用程序为浏览器、PPT(电子幻灯片)、visio(一种绘图软件)等应用程序。终端10为手机、平板电脑、PC(Personal Computer)设备、手表、穿戴设备、MP3播放器(Moving Picture ExpertsGroup Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving PictureExperts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器等设备中的至少一种。服务器20可以为一台服务器、多台服务器、云服务器、云计算平台和虚拟化中心中的至少一种。

图2是根据一示例性实施例示出的一种组件的吸附操作方法的流程图，如图2所示，该组件的吸附操作方法用于终端中，包括以下步骤。

在步骤S21中，展示组件编辑界面，该组件编辑界面包括多个可编辑的组件；

在步骤S22中，响应于对该组件编辑界面中的第一组件的拖拽操作，确定该第一组件待吸附的至少一个第二组件；

在步骤S23中，对于每个第二组件，基于该第一组件的当前位置和该第二组件的当前位置，确定该第一组件与该第二组件之间的距离；

在步骤S24中，基于该拖拽操作的移动速度和该第一组件与每个第二组件之间的距离，从该至少一个第二组件中确定目标组件；

在步骤S25中，将该第一组件与该目标组件进行吸附。

在一些实施例中，该确定该第一组件待吸附的至少一个第二组件包括：

基于该拖拽操作的移动方向，从该组件编辑界面中确定该第一组件待吸附的至少一个第二组件。

在一些实施例中，该基于该拖拽操作的移动速度和该第一组件与每个第二组件之间的距离，从该至少一个第二组件中确定该目标组件包括：

在该拖拽操作的移动速度不大于第一速度阈值的情况下，基于该第一组件与每个第二组件之间的距离，从该至少一个第二组件中，确定距离不大于距离阈值的目标组件。

在一些实施例中，该方法还包括：

在该拖拽操作的移动速度不大于该第一速度阈值，且大于第二速度阈值的情况下，响应于该拖拽操作的移动速度降低，将该第一组件和该目标组件脱离吸附状态，以及将该拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动该第一组件。

在一些实施例中，该方法还包括：

在该拖拽操作的移动速度不大于第二速度阈值的情况下，将该拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动该第一组件；

响应于该拖拽操作的移动方向改变，且该第一组件与该目标组件之间的距离增大至大于距离阈值，基于该拖拽操作的移动速度，移动该第一组件。

在一些实施例中，该方法还包括：

在该拖拽操作的移动速度大于该第一速度阈值的情况下，基于该拖拽操作的移动速度，移动该第一组件。

在一些实施例中，该方法还包括：

在该组件编辑界面中确定提示区域，在该提示区域内显示该第一组件与该目标组件之间的距离。

在一些实施例中，该方法还包括：

运行渲染线程，通过该渲染线程，执行该展示该组件编辑界面的步骤；

运行计算线程，通过该计算线程，执行该确定该第一组件待吸附的至少一个第二组件；对于每个第二组件，基于该第一组件的当前位置和该第二组件的当前位置，确定该第一组件与该第二组件之间的距离；基于该拖拽操作的移动速度和该第一组件与每个第二组件之间的距离，从该至少一个第二组件中确定该目标组件的步骤。

在一些实施例中，该运行计算线程包括：

响应于当前终端支持多线程工具，通过运行该多线程工具的脚本文件，创建该计算线程，运行该计算线程；

响应于该当前终端不支持该多线程工具，通过该当前终端与服务器之间的通信连接，借助于该服务器运行该计算线程。

当用户想要将两个组件进行吸附时，可以对其中一个组件进行拖拽，对于被拖拽的组件，先确定该组件待吸附的至少一个组件，再基于拖拽操作的移动速度以及该组件与待吸附的每个组件之间的距离来确定最终要吸附的目标组件，这样当用户的意图是触发终端将该组件与目标组件吸附在一起时，只需要改变拖拽操作的移动速度即可实现，这样就不需要借助于键盘来操作，从而提高了组件编辑的操作效率。

图3是根据一示例性实施例示出的一种组件的吸附操作方法的流程图，如图3所示，该组件的吸附操作方法用于终端中，包括以下步骤。

在步骤301中，终端展示组件编辑界面，该组件编辑界面包括多个可编辑的组件。

终端上安装有目标应用程序，用户可以触发该目标应用程序以触发终端展示该目标应用程序对应的首页界面；响应于用户的触发操作，终端展示该目标应用程序对应的首页界面，用户可以在首页界面中添加多个组件，进而触发终端展示组件编辑界面。例如，首页界面中包括组件区域和编辑区域，组件区域中包括多个组件，用户可以通过拖拽的方式将组件区域的组件拖拽到编辑区域，进而触发终端展示组件编辑界面。

目标应用程序为浏览器、PPT或者visio等任一应用程序。例如，目标应用程序为浏览器，则组件编辑界面为网页编辑界面，该网页编辑界面中包括从浏览器对应的服务器中下载的多个可编辑的组件；例如，目标应用程序为PPT或者visio等应用程序，则组件编辑界面为非网页编辑界面，非网页编辑界面中包括PPT或者visio本地存储的多个可编辑的组件。

需要说明的一点是，多个可编辑的组件可以为同一类型的组件，也可以为不同类型的组件；例如，多个可编辑的组件为流程图类型的组件、电气图类型的组件和组织结构图类型的组件等。并且，每个组件的形状可以相同，也可以不同；例如，组件的形状可以为心形、五角星形、圆形、正方形等。

例如，在本公开实施例中，以多个可编辑的组件为同一类型的组件为例进行说明。参见图4，该组件编辑界面中包括多个可编辑的组件，分别为A组件、B组件、C组件、D组件、E组件、F组件和G组件。

在一些实施例中，用户可以通过拖拽的方式对组件进行编辑，响应于接收到用户的拖拽操作，终端对该组件进行编辑；相应的，终端确定接收到拖拽操作的实现方式可以为：响应于该组件编辑界面中的第一组件被选中，终端将第一组件的状态由非激活状态变为激活状态，在第一组件处于激活状态下，响应于第一移动组件被拖动，确定接收到该拖拽操作。

需要说明的一点是，该组件编辑界面中未被选择中的组件仍然处于非激活状态。例如，参见图5，该第一组件为B组件，鼠标指针停留在B组件上，且鼠标指针被按下，则确定B组件被选中，则将B组件的状态设置为激活状态。而由于A组件未被选中，则A组件的状态为非激活状态。

在步骤302中，终端响应于对该组件编辑界面中的第一组件的拖拽操作，确定该第一组件待吸附的至少一个第二组件。

其中，第一组件为待进行吸附操作的组件。在一些实施例中，在确定该第一组件待吸附的至少一个第二组件之前，终端需要先确定该拖拽操作的移动方向。相应的，本步骤的实现方式可以为：终端基于第一组件在拖拽前的当前位置和在拖拽后的当前位置，确定该拖拽操作的移动方向。

在一些实施例中，组件的当前位置可以表示为该组件在组件编辑界面中的坐标，该坐标包括横坐标x和纵坐标y。移动方向的表示方式可以根据需要设置和更改，本公开对此不作具体限定。在一些实施例中，该移动方向可以分解为水平方向和垂直方向，例如，该移动方向为左上，则水平方向为左，垂直方向为上；相应的，该移动方向为相对于第一组件的左上、左下、右上、右下、正左、正右、正上、正下中的任一个方向。

例如，第一组件为A组件，A组件在拖拽前的位置为(x1，y1)，x1＝2，y1＝4；A组件在拖拽后的位置为(x2，y2)，x2＝1，y2＝6；可见，x1大于x2，则水平方向为左，y1小于y2，则垂直方向为上，将水平方向与垂直方向组合成移动方向，得到该移动方向为左上。

在确定出该拖拽操作的移动方向之后，终端确定该第一组件待吸附的至少一个第二组件的实现方式可以为：基于该拖拽操作的移动方向，从该组件编辑界面中确定该第一组件待吸附的至少一个第二组件。

其中，由于在对第一组件进行拖拽的过程中，若想将第一组件和第二组件进行吸附，应该将第一组件拖拽至第二组件的附近，因此，该至少一个第二组件为该第一组件按照该移动方向移动后能够靠近的组件。

例如，参见图6，该第一组件为B组件，B组件的坐标为(5，4)，该移动方向为左上方向，该组件编辑界面中的其他组件分别为A组件、C组件、D组件、E组件、F组件、G组件和H组件，坐标分别为(6，3)、(7，3)、(8，2.5)、(7，1.5)、(6.5，2)和(6.5，1)，在A组件的横坐标小于B组件的横坐标且A组件的纵坐标大于A组件的纵坐标的情况下，确定A组件的当前位置位于B组件的左方和上方，则确定该至少一个第二组件为A组件。

需要说明的一点，终端确定出至少一个第二组件后，将该至少一个第二组件组成组件集合。由于在拖拽过程中，终端周期性的确定目标组件；例如，终端每隔200ms确定一次目标组件，这样后续在确定目标组件时，可以直接从该组件集合中确定，不需要从整个组件编辑界面中确定，这样减少了在确定组件时，比对的组件数量，提高了组件确定效率。

例如，终端将A组件作为集合a，在拖拽过程中，终端直接从集合a中确定与第一组件进行吸附操作的目标组件。

在本公开实施例中，终端基于该拖拽操作的移动方向来确定待与第一组件进行吸附操作的至少一个第二组件，进而在后续的编辑操作过程中，仅需在该至少一个第二组件确定需要进行吸附操作的第二组件即可，无需对组件编辑界面中的所有组件进行运算，进而减少了组件编辑过程中的运算量，提高了组件确定效率。

在步骤303中，对于每个第二组件，终端基于该第一组件的当前位置和该第二组件的当前位置，确定该第一组件与该第二组件之间的距离。

由于该拖拽操作对该第一组件的拖拽，该第一组件的当前位置会发生变化，则在该第一组件的位置变化的过程中，需要从该至少一个第二组件中，确定该第一组件逐渐靠近的第二组件，即该第二组件与该第一组件的距离随第一组件的位置变化而减小。

在本步骤中，终端基于第一组件的当前位置和尺寸信息以及第二组件的当前位置和尺寸信息，确定该第一组件与该第二组件之间的距离。

该尺寸信息为任一组件的宽度(width)和高度(height)。例如，第一组件为B组件，B组件的位置信息为(x1，y1)，尺寸信息为width1、height1，第二组件为A组件，A组件的位置信息为(x2，y2)，该尺寸信息为width2、height2。若A组件位于B组件的左上方向，则确定x1与x2之间的差值为第一差值，确定第一差值与width2之间的差值为第二差值，将该第二差值作为该A组件与B组件之间的距离。

在本公开实施例中，通过两个组件的当前位置来确定组件之间的距离，为后续确定目标组件提供了数据支持。

在一些实施例中，终端在执行步骤304之前，需要确定该拖拽操作的移动速度，基于该移动速度执行步骤304。由于该拖拽操作由鼠标指针拖拽该第一组件触发，相应的，终端确定该拖拽操作的移动速度的实现方式可以为：终端确定距离当前时间最近的预设时长内的鼠标指针的位移，将该位移与该预设时长的比值作为该拖拽操作的移动速度。

其中，该预设时长可以根据需要进行设置并更改；在本公开实施例中，对预设时长不作具体限定；例如，预设时长为200ms、300ms等。需要说明一点的是，在确定该鼠标指针的位移的过程中，该鼠标指针始终选中该第一组件。

在本公开实施例中，每隔一个预设时长进行一次对鼠标指针的位移采样，通过该位移与该预设时长，来判断该拖拽操作的实时移动速度，进而保证了移动速度的准确性。

在步骤304中，终端基于该拖拽操作的移动速度和该第一组件与每个第二组件之间的距离，从该至少一个第二组件中确定目标组件。

其中，在对组件进行编辑操作的过程中，拖拽操作的移动速度不是固定不变的；例如，在需要将第一组件移动较大距离时，可快速拖动第一组件；在需要将第一组件移动较小距离时，可慢速拖动第一组件，以防移动速度过快，使得第一组件的移动距离超过所需的距离。因此，终端可基于该拖拽操作的移动速度和该第一组件与每个第二组件之间的距离，来确定用户想要将第一组件和哪个第二组件进行吸附。

在本步骤中，终端可以先基于该拖拽操作的移动速度确定第一组件是否要吸附其他组件。第一种情况，在拖拽操作的移动速度较大的情况下，为了节省计算资源，可不确定目标组件，相应的，终端在该拖拽操作的移动速度大于该第一速度阈值的情况下，基于该拖拽操作的移动速度，移动该第一组件。

其中，该第一速度阈值可根据需要设置并更改，在本公开实施例中，对此不做具体限定；例如，第一速度阈值可以为1像素数/20ms。

在本公开实施例中，该移动速度大于第一速度阈值表示该拖拽操作处于较快的速度状态，从而不对第一组件进行吸附操作，减少了对终端性能的浪费。

第二种情况，在拖拽操作的移动速度不大的情况下，第一组件和第二组件之间的距离根据该拖拽操作的拖拽而变化，相应的，终端在该拖拽操作的移动速度不大于第一速度阈值的情况下，基于该第一组件与每个第二组件之间的距离，从该至少一个第二组件中，确定距离不大于距离阈值的目标组件。

其中，该距离阈值可根据需要设置并更改，在本公开实施例中，对此不做具体限定；例如，距离阈值可以为8像素数、10像素数等。在移动速度不大时，若第一组件和第二组件之间的距离较近，可以认为用户想要将该第一组件与第二组件进行吸附，则终端将该第二组件确定为目标组件。

例如，参见图7，第一组件为B组件，第二组件为A组件，距离阈值为10像素数，移动速度不大于第一速度阈值，且B组件与A组件的之间的距离为5像素数，即距离小于距离阈值，则终端确定将B组件和A组件进行吸附。

在本公开实施例中，若拖拽操作的移动速度不大，且组件之间的距离小于距离阈值，则将第二组件作为第一组件要吸附的对象，从而无需用户继续拖拽该第一组件，节省了操作时间。

在一些实施例中，若终端已经将距离不大于距离阈值的组件进行了吸附，那么若对第一组件的拖拽操作未停止时，可以将吸附在一起的组件脱离吸附状态，并且放大拖拽操作的移动速度与该第一组件向该第二组件靠近的速度之间的比例；相应的，终端在该拖拽操作的移动速度不大于该第一速度阈值，且大于第二速度阈值的情况下，响应于该拖拽操作的移动速度降低，将该第一组件和该目标组件脱离吸附状态，以及将该拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动该第一组件。

其中，该第二速度阈值小于该第一速度阈值，例如，若第一速度阈值为1像素数/20ms，则第二速度阈值可以为1像素数/30ms。该第二速度阈值可根据需要设置并更改，在本公开实施例中，对此不做具体限定。该预设倍数可以根据需要进行设置并更改；在本公开实施例中，对预设倍数不作具体限定。例如，预设倍数为5、4。

其中，拖拽操作的移动速度不大于该第一速度阈值，且大于第二速度阈值表示该拖拽操作处于中速状态，若第一组件和目标组件之间的已经进行了吸附操作，但用户仍在通过终端拖拽第一组件，那么表明用户的意图并非是将第一组件与该组件进行吸附，因此，可以将吸附在一起的组件脱离吸附状态。

在本公开实施例中，若第一组件和目标组件已进行了吸附操作，但拖拽操作并未停止，则脱离吸附，并缩小移动速度的比例来拖拽第一组件，从而实现对第一组件的精细化操作，避免出现因误吸附导致的无法对第一组件进行小距离的移动的现象，提高了组件编辑操作的精准度。

在另一些实施例中，在该移动速度较小时，终端可以放大拖拽操作的移动速度与该第一组件向该第二组件靠近的速度之间的比例；相应的，终端在该拖拽操作的移动速度不大于第二速度阈值的情况下，将该拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动该第一组件。

在本步骤中，该移动速度不大于该第二速度阈值表示该拖拽操作处于较慢的速度状态，表示用户可能想要对该第一组件进行精细化操作，因此，终端可以按照预设倍数缩小移动速度，来对第一组件进行移动。

例如，该移动速度处于较快的速度状态时，拖拽操作的移动速度和第一组件的移动速度之间的比例为1：1，即拖拽操作的移动速度和第一组件的移动速度相等，即在拖拽操作的拖拽下，相同时间内，鼠标移动n像素数，对应的第一组件也会移动n像素数；而缩小预设倍数后，拖拽操作的移动速度和第一组件的移动速度之间的比例为4：1，即相同时间内，鼠标移动4像素数，对应的第一组件移动1像素数。

在本步骤中，若拖拽操作的移动方向发生了改变，那么目标组件可能发生变化，因此，在将拖拽操作的移动速度缩小预设倍数的情况下，终端可以恢复对第一组件的移动速度，相应的，终端响应于该拖拽操作的移动方向改变，且该第一组件与该目标组件之间的距离增大至大于距离阈值，基于该拖拽操作的移动速度，移动该第一组件。

其中，若移动方向改变，表示用户的意图可能并非将该第一组件与目标组件进行吸附，因此，在组件之间的距离较大时，基于拖拽操作的移动速度移动第一组件，即不再将移动速度缩小预设倍数。

在本公开实施例中，一方面，若拖拽操作的移送速度较慢，表示用户可能想要对第一组件进行精细化操作，因此通过缩小移动速度的比例来拖拽第一组件，从而实现对第一组件的精细化操作；另一方面，若第一组件和目标组件之间的距离大于距离阈值，则无需再缩小移动速度，因此可恢复正常的拖拽操作，从而便于用户对第一组件进行其他编辑操作，操作效率较高。

在一些实施例中，该第一组件与目标组件之间的距离不大于该距离阈值时，即在组件编辑界面中，第一组件与目标组件之间的距离较近，终端可以在该组件编辑界面中设置一个提取区域。相应的，终端在该组件编辑界面中确定提示区域，在该提示区域内显示该第一组件与该目标组件之间的距离。

其中，在本公开实施例中，对提示区域的设置位置不做具体限定，例如，终端可以在该第一组件和该目标组件的上方显示该提示区域；或者，在该组件编辑界面的四周显示该提示区域。例如，参见图8，第一组件为B组件，目标组件为A组件，距离阈值为10像素数，B组件与A组件的之间的距离为4像素数，则终端在该组件编辑界面中确定提示区域，在该提示区域中显示该距离。

在本公开实施例中，终端以类放大镜的方式来设置一提示区域提示用户第一组件与目标组件之间的距离，便于用户基于该距离拖动第一组件至需要的位置，以及防止该提示区域对其他组件造成遮挡，影响编辑操作。

在步骤305中，终端将该第一组件与该目标组件进行吸附。

其中，在确定好目标组件之后，终端将第一组件与该目标组件进行吸附。在本步骤中，终端可以在该拖拽操作停止时，进行吸附操作，即鼠标不再拖动第一组件时。

需要说明的一点是，在基于该拖拽操作拖拽该第一组件的过程中，由于该拖拽操作在拖动第一组件，因此，第一组件的当前位置是变化的，而该拖拽操作的移动速度也可能发生变化，因此，基于该拖拽操作的移动速度和第一组件的当前位置，可以重新确定该目标组件。终端重新确定该目标组件的过程与步骤302-304相似，在此不再赘述。

在本公开实施例中，当用户想要将两个组件进行吸附时，可以对其中一个组件进行拖拽，对于被拖拽的组件，先确定该组件待吸附的组件集合，再基于拖拽操作的移动速度以及该组件与集合中每个组件之间的距离来确定最终要吸附的目标组件，这样当用户的意图是触发终端将该组件与目标组件吸附在一起时，只需要改变拖拽操作的移动速度即可实现，这样就不需要借助于键盘来操作，从而提高了组件编辑的操作效率。

图9是根据一示例性实施例示出的一种组件的吸附操作方法的流程图，如图9所示，该组件的吸附操作方法用于终端中，包括以下步骤。

在步骤901中，终端运行渲染线程，通过该渲染线程，展示组件编辑界面，该组件编辑界面包括多个可编辑的组件。

其中，终端通过渲染引擎运行渲染线程，在终端的显示界面上显示该多个可编辑的组件，得到该组件编辑界面。

在步骤902中，终端响应于对该组件编辑界面中的第一组件的拖拽操作，运行计算线程，通过该计算线程，确定该第一组件待吸附的至少一个第二组件。

其中，由于吸附操作的运算过程只和组件的当前位置和尺寸信息相关，相应的，终端将组件编辑界面中的组件抽象成只有当前位置和尺寸信息的对象，即将组件以纯数据的形式输入计算引擎，由计算引擎运行该计算线程。

其中，计算线程用于基于该组件的当前位置和尺寸信息，确定该第一组件待吸附的至少一个第二组件。在本步骤中，终端运行计算线程的实现方式包括：

在一些实施例中，终端响应于当前终端支持多线程工具，通过运行该多线程工具的脚本文件，创建该计算线程，运行该计算线程。

在本步骤中，响应于当前终端中的浏览器支持Web Workers(多线程工具)，终端通过运行Web Workers的脚本文件，创建计算线程，通过该计算线程，对该第一组件和组件编辑界面中的其他组件的当前位置和尺寸信息进行运算，确定至少一个第二组件，得到运算结果。

在另一些实施例中，终端响应于当前终端不支持该多线程工具，通过该当前终端与服务器之间的通信连接，借助于该服务器运行该计算线程。

其中，当终端不支持Web Workers时，终端通过与服务器之间的通信连接，向服务器发送计算线程创建请求。该通信连接的通信协议可以为WebSocket(一种终端与服务器间进行全双工通信的通信协议)。服务器接收该计算线程创建请求，创建该计算线程，通过该计算线程，对该第一组件和组件编辑界面中的其他组件的当前位置和尺寸信息进行运算，确定至少一个第二组件，得到运算结果，服务器向终端发送该运算结果，终端接收该运算结果。

在本公开实施例中，通过将计算操作由终端中或者服务器中的独立的计算线程来执行，进而将计算操作从渲染线程中分离开，使得终端能够充分利用多核CPU(处理器)资源，提高了对组件进行吸附操作的计算效率。

本步骤的实现方式与步骤302的实现方式相似，在此不再赘述。

在步骤903中，对于每个第二组件，终端通过该计算线程，基于该第一组件的当前位置和该第二组件的当前位置，确定该第一组件与该第二组件之间的距离。

本步骤的实现方式与步骤303的实现方式相似，在此不再赘述。

在步骤904中，终端通过该计算线程，基于该拖拽操作的移动速度和该第一组件与每个第二组件之间的距离，从该至少一个第二组件中确定目标组件。

其中，本步骤的实现方式与步骤304的实现方式相似，在此不再赘述。

在步骤905中，终端通过该渲染线程，将该第一组件与该目标组件进行吸附。

例如，渲染线程在组件编辑界面中对该第一组件与该目标组件进行吸附，并在该组件编辑界面中显示该吸附状态。

在本申请实施例中，将组件编辑界面中的组件抽象成纯数据的形式，由计算线程来确定待与第一组件进行吸附的目标组件，由渲染线程进行界面渲染以及基于计算线程确定出的目标组件，对第一组件和目标组件进行吸附操作，从而实现将吸附操作的确定从渲染线程中独立出来，由计算线程来完成，也即通过两个线程完成渲染操作和确定操作，从而提高了对组件进行吸附操作的运算效率。

图10是根据一示例性实施例示出的一种组件的辅助操作装置100框图。参照图10，该装置100包括：展示单元1001、第一确定单元1002、第二确定单元1003、第三确定单元1004和吸附单元1005。

展示单元1001，被配置为执行展示组件编辑界面，该组件编辑界面包括多个可编辑的组件；

第一确定单元1002，被配置为执行响应于对该组件编辑界面中的第一组件的拖拽操作，确定该第一组件待吸附的至少一个第二组件；

第二确定单元1003，被配置为执行对于每个第二组件，基于该第一组件的当前位置和该第二组件的当前位置，确定该第一组件与该第二组件之间的距离；

第三确定单元1004，被配置为执行基于该拖拽操作的移动速度和该第一组件与每个第二组件之间的距离，从该至少一个第二组件中确定目标组件；

吸附单元1005，被配置为执行将该第一组件与该目标组件进行吸附。

在一些实施例中，该第一确定单元被配置为执行基于该拖拽操作的移动方向，从该组件编辑界面中确定该第一组件待吸附的至少一个第二组件。

在一些实施例中，该第三确定单元，被配置为执行在该拖拽操作的移动速度不大于第一速度阈值的情况下，基于该第一组件与每个第二组件之间的距离，从该至少一个第二组件中，确定距离不大于距离阈值的目标组件。

在一些实施例中，该装置还包括：

移动单元，被配置为执行在该拖拽的移动速度不大于该第一速度阈值，且大于第二速度阈值的情况下，响应于该拖拽操作的移动速度降低，将该第一组件和该目标组件脱离吸附状态，以及将该拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动该第一组件。

在一些实施例中，该装置还包括：

该移动单元，被配置为执行在该拖拽操作的移动速度不大于第二速度阈值的情况下，将该拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动该第一组件；

该移动单元，被配置为执行响应于该拖拽操作的移动方向改变，且该第一组件与该目标组件之间的距离增大至大于距离阈值，基于该拖拽操作的移动速度，移动该第一组件。

在一些实施例中，该装置还包括：

该移动单元，被配置为执行在该拖拽操作的移动速度大于该第一速度阈值的情况下，基于该拖拽操作的移动速度，移动该第一组件。

在一些实施例中，该装置还包括：

提示单元，被配置为执行在该组件编辑界面中确定提示区域，在该提示区域内显示该第一组件与该目标组件之间的距离。

在一些实施例中，该装置还包括：

第一运行单元，被配置为执行运行渲染线程，通过该渲染线程，展示该组件编辑界面；

第二运行单元，被配置为执行运行计算线程，通过该计算线程，确定该第一组件待吸附的至少一个第二组件；对于每个第二组件，基于该第一组件的当前位置和该第二组件的当前位置，确定该第一组件与该第二组件之间的距离；基于该拖拽操作的移动速度和该第一组件与每个第二组件之间的距离，从该至少一个第二组件中确定该目标组件。

在一些实施例中，该第二运行单元，被配置为执行响应于当前终端支持多线程工具，通过运行该多线程工具的脚本文件，创建该计算线程，运行该计算线程；响应于该当前终端不支持该多线程工具，通过该当前终端与服务器之间的通信连接，借助于该服务器运行该计算线程。

当用户想要将两个组件进行吸附时，可以对其中一个组件进行拖拽，对于被拖拽的组件，先确定该组件待吸附的至少一个组件，再基于拖拽操作的移动速度以及该组件与待吸附的每个组件之间的距离来确定最终要吸附的目标组件，这样当用户的意图是触发终端将该组件与目标组件吸附在一起时，只需要改变拖拽操作的移动速度即可实现，这样就不需要借助于键盘来操作，从而提高了组件编辑的操作效率。

关于上述实施例中的装置，其中各个组件执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

图11是根据一示例性实施例示出的一种终端10的框图。在一些实施例中，该终端10可以为：智能手机、平板电脑、笔记本电脑或台式电脑等。终端10还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，终端10包括有：处理器101和存储器102。

在一些实施例中，处理器101包括一个或多个处理核心，比如4核心处理器、8核心处理器等。在一些实施例中，处理器101采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(ProgrammableLogic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。在一些实施例中，处理器101也包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central Processing Unit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器101集成有GPU(GraphicsProcessing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器101还包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

在一些实施例中，存储器102包括一个或多个计算机可读存储介质，该计算机可读存储介质是非暂态的。在一些实施例中，存储器102还包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器102中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器101所执行以实现本公开中方法实施例提供的组件的吸附操作方法。

在一些实施例中，终端10还可选包括有：外围设备接口103和至少一个外围设备。在一些实施例中，处理器101、存储器102和外围设备接口103之间通过总线或信号线相连。在一些实施例中，各个外围设备通过总线、信号线或电路板与外围设备接口103相连。具体地，外围设备包括：射频电路104、显示屏105、摄像头组件106、音频电路107、定位组件108和电源109中的至少一种。

外围设备接口103可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器101和存储器102。在一些实施例中，处理器101、存储器102和外围设备接口103被集成在同一芯片或电路板上；在一些其他实施例中，处理器101、存储器102和外围设备接口103中的任意一个或两个在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路104用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路104通过电磁信号与通信网络以及其他通信设备进行通信。射频电路104将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。在一些实施例中，射频电路104包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。在一些实施例中，射频电路104通过至少一种无线通信协议来与其他终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路104还包括NFC(Near Field Communication，近距离无线通信)有关的电路，本公开对此不加以限定。

显示屏105用于显示UI(User Interface，用户界面)。在一些实施例中，该UI包括图形、文本、图标、视频及其他们的任意组合。当显示屏105是触摸显示屏时，显示屏105还具有采集在显示屏105的表面或表面上方的触摸信号的能力。在一些实施例中，该触摸信号作为控制信号输入至处理器101进行处理。此时，显示屏105还用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏105为一个，设置在终端10的前面板；在另一些实施例中，显示屏105为至少两个，分别设置在终端10的不同表面或呈折叠设计；在另一些实施例中，显示屏105是柔性显示屏，设置在终端10的弯曲表面上或折叠面上。甚至，显示屏105还设置成非矩形的不规则图形，也即异形屏。在一些实施例中，显示屏105采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件106用于采集图像或视频。在一些实施例中，摄像头组件106包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其他融合拍摄功能。在一些实施例中，摄像头组件106还包括闪光灯。在一些实施例中，闪光灯是单色温闪光灯，在一些实施例中，闪光灯是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，用于不同色温下的光线补偿。

在一些实施例中，音频电路107包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器101进行处理，或者输入至射频电路104以实现语音通信。出于立体声采集或降噪的目的，在一些实施例中，麦克风为多个，分别设置在终端10的不同部位。在一些实施例中，麦克风是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器101或射频电路104的电信号转换为声波。在一些实施例中，扬声器是传统的薄膜扬声器，在一些实施例中，扬声器以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅能够将电信号转换为人类可听见的声波，也能够将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路107还包括耳机插孔。

定位组件108用于定位终端10的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。在一些实施例中，定位组件107是基于美国的GPS(Global Positioning System，全球定位系统)、中国的北斗系统或俄罗斯的伽利略系统的定位组件。

电源109用于为终端10中的各个组件进行供电。在一些实施例中，电源109是交流电、直流电、一次性电池或可充电电池。当电源109包括可充电电池时，该可充电电池是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还用于支持快充技术。

在一些实施例中，终端10还包括有一个或多个传感器110。该一个或多个传感器110包括但不限于：加速度传感器111、陀螺仪传感器112、压力传感器113、指纹传感器114、光学传感器115以及接近传感器116。

在一些实施例中，加速度传感器111检测以终端10建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器111用于检测重力加速度在三个坐标轴上的分量。在一些实施例中，处理器101根据加速度传感器111采集的重力加速度信号，控制显示屏105以横向视图或纵向视图进行用户界面的显示。在一些实施例中，加速度传感器111还用于游戏或者用户的运动数据的采集。

在一些实施例中，陀螺仪传感器112检测终端10的机体方向及转动角度，陀螺仪传感器112与加速度传感器111协同采集用户对终端10的3D动作。处理器101根据陀螺仪传感器112采集的数据，能够实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

在一些实施例中，压力传感器113设置在终端10的侧边框和/或显示屏105的下层。当压力传感器113设置在终端10的侧边框时，能够检测用户对终端10的握持信号，由处理器101根据压力传感器113采集的握持信号进行左右手识别或快捷操作。当压力传感器113设置在显示屏105的下层时，由处理器101根据用户对显示屏105的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器114用于采集用户的指纹，由处理器101根据指纹传感器114采集到的指纹识别用户的身份，或者，由指纹传感器114根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器101授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。在一些实施例中，指纹传感器114被设置在终端10的正面、背面或侧面。当终端10上设置有物理按键或厂商Logo时，指纹传感器114与物理按键或厂商Logo集成在一起。

光学传感器115用于采集环境光强度。在一个实施例中，处理器101根据光学传感器115采集的环境光强度，控制显示屏105的显示亮度。具体地，当环境光强度较高时，调高显示屏105的显示亮度；当环境光强度较低时，调低显示屏105的显示亮度。在另一个实施例中，处理器101还根据光学传感器115采集的环境光强度，动态调整摄像头组件106的拍摄参数。

接近传感器116，也称距离传感器，通常设置在终端10的前面板。接近传感器116用于采集用户与终端10的正面之间的距离。在一个实施例中，当接近传感器116检测到用户与终端10的正面之间的距离逐渐变小时，由处理器101控制显示屏105从亮屏状态切换为息屏状态；当接近传感器116检测到用户与终端10的正面之间的距离逐渐变大时，由处理器101控制显示屏105从息屏状态切换为亮屏状态。

本领域技术人员能够理解，图11中示出的结构并不构成对终端10的限定，能够包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

在示例性实施例中，还提供了一种计算机可读存储介质，当该计算机可读存储介质中的指令由终端的处理器执行时，使得终端能够执行如上述实施例中的组件的吸附操作方法。

在示例性实施例中，还提供了一种计算机程序产品，包括计算机程序/指令，该计算机程序/指令被处理器执行时实现上述实施例中的组件的吸附操作方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

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

Claims (16)

1.一种组件的吸附操作方法，其特征在于，包括：

展示组件编辑界面，所述组件编辑界面包括多个可编辑的组件；

响应于对所述组件编辑界面中的第一组件的拖拽操作，确定所述第一组件待吸附的至少一个第二组件；

对于每个所述第二组件，基于所述第一组件的当前位置和所述第二组件的当前位置，确定所述第一组件与所述第二组件之间的距离；

在所述拖拽操作的移动速度不大于第一速度阈值的情况下，基于所述第一组件与每个所述第二组件之间的距离，从所述至少一个第二组件中，确定距离不大于距离阈值的目标组件；

将所述第一组件与所述目标组件进行吸附；

所述方法还包括：

在所述拖拽操作的移动速度不大于所述第一速度阈值且大于第二速度阈值的情况下，响应于所述拖拽操作的移动速度降低，将所述第一组件和所述目标组件脱离吸附状态，以及将所述拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动所述第一组件。

2.根据权利要求1所述的组件的吸附操作方法，其特征在于，所述确定所述第一组件待吸附的至少一个第二组件包括：

基于所述拖拽操作的移动方向，从所述组件编辑界面中确定所述第一组件待吸附的至少一个第二组件。

3.根据权利要求1所述的组件的吸附操作方法，其特征在于，所述方法还包括：

在所述拖拽操作的移动速度不大于所述第二速度阈值的情况下，将所述拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动所述第一组件；

响应于所述拖拽操作的移动方向改变，且所述第一组件与所述目标组件之间的距离增大至大于距离阈值，基于所述拖拽操作的移动速度，移动所述第一组件。

4.根据权利要求1所述的组件的吸附操作方法，其特征在于，所述方法还包括：

在所述拖拽操作的移动速度大于所述第一速度阈值的情况下，基于所述拖拽操作的移动速度，移动所述第一组件。

5.根据权利要求1-3任一项所述的组件的吸附操作方法，其特征在于，所述方法还包括：

在所述组件编辑界面中确定提示区域，在所述提示区域内显示所述第一组件与所述目标组件之间的距离。

6.根据权利要求1所述的组件的吸附操作方法，其特征在于，所述方法还包括：

运行渲染线程，通过所述渲染线程，执行所述展示所述组件编辑界面的步骤；

运行计算线程，通过所述计算线程，执行所述确定所述第一组件待吸附的至少一个第二组件；对于每个所述第二组件，基于所述第一组件的当前位置和所述第二组件的当前位置，确定所述第一组件与所述第二组件之间的距离；在所述拖拽操作的移动速度不大于第一速度阈值的情况下，基于所述第一组件与每个所述第二组件之间的距离，从所述至少一个第二组件中，确定距离不大于距离阈值的目标组件的步骤。

7.根据权利要求6所述的组件的吸附操作方法，其特征在于，所述运行计算线程包括：

响应于当前终端支持多线程工具，通过运行所述多线程工具的脚本文件，创建所述计算线程，运行所述计算线程；

响应于所述当前终端不支持所述多线程工具，通过所述当前终端与服务器之间的通信连接，借助于所述服务器运行所述计算线程。

8.一种组件的吸附操作装置，其特征在于，包括：

展示单元，被配置为执行展示组件编辑界面，所述组件编辑界面包括多个可编辑的组件；

第一确定单元，被配置为执行响应于对所述组件编辑界面中的第一组件的拖拽操作，确定所述第一组件待吸附的至少一个第二组件；

第二确定单元，被配置为执行对于每个所述第二组件，基于所述第一组件的当前位置和所述第二组件的当前位置，确定所述第一组件与所述第二组件之间的距离；

第三确定单元，被配置为执行在所述拖拽操作的移动速度不大于第一速度阈值的情况下，基于所述第一组件与每个所述第二组件之间的距离，从所述至少一个第二组件中，确定距离不大于距离阈值的目标组件；

吸附单元，被配置为执行将所述第一组件与所述目标组件进行吸附；所述装置还包括：

移动单元，被配置为执行在所述拖拽操作的移动速度不大于所述第一速度阈值，且大于第二速度阈值的情况下，响应于所述拖拽操作的移动速度降低，将所述第一组件和所述目标组件脱离吸附状态，以及将所述拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动所述第一组件。

9.根据权利要求8所述的组件的吸附操作装置，其特征在于，所述第一确定单元被配置为执行基于所述拖拽操作的移动方向，从所述组件编辑界面中确定所述第一组件待吸附的至少一个第二组件。

10.根据权利要求8所述的组件的吸附操作装置，其特征在于，所述装置还包括：

所述移动单元，被配置为执行在所述拖拽操作的移动速度不大于第二速度阈值的情况下，将所述拖拽操作的移动速度缩小预设倍数，基于缩小后的移动速度移动所述第一组件；

所述移动单元，被配置为执行响应于所述拖拽操作的移动方向改变，且所述第一组件与所述目标组件之间的距离增大至大于距离阈值，基于所述拖拽操作的移动速度，移动所述第一组件。

11.根据权利要求8所述的组件的吸附操作装置，其特征在于，所述装置还包括：

所述移动单元，被配置为执行在所述拖拽操作的移动速度大于所述第一速度阈值的情况下，基于所述拖拽操作的移动速度，移动所述第一组件。

12.根据权利要求8-10任一项所述的组件的吸附操作装置，其特征在于，所述装置还包括：

提示单元，被配置为执行在所述组件编辑界面中确定提示区域，在所述提示区域内显示所述第一组件与所述目标组件之间的距离。

13.根据权利要求8所述的组件的吸附操作装置，其特征在于，所述装置还包括：

第一运行单元，被配置为执行运行渲染线程，通过所述渲染线程，展示所述组件编辑界面；

第二运行单元，被配置为执行运行计算线程，通过所述计算线程，确定所述第一组件待吸附的至少一个第二组件；对于每个所述第二组件，基于所述第一组件的当前位置和所述第二组件的当前位置，确定所述第一组件与所述第二组件之间的距离；在所述拖拽操作的移动速度不大于第一速度阈值的情况下，基于所述第一组件与每个所述第二组件之间的距离，从所述至少一个第二组件中，确定距离不大于距离阈值的目标组件。

14.根据权利要求13所述的组件的吸附操作装置，其特征在于，所述第二运行单元，被配置为执行响应于当前终端支持多线程工具，通过运行所述多线程工具的脚本文件，创建所述计算线程，运行所述计算线程；响应于所述当前终端不支持所述多线程工具，通过所述当前终端与服务器之间的通信连接，借助于所述服务器运行所述计算线程。

15.一种终端，其特征在于，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至7中任一项所述的组件的吸附操作方法。

16.一种计算机可读存储介质，其特征在于，当所述计算机可读存储介质中的指令由终端的处理器执行时，使得终端能够执行如权利要求1至7中任一项所述的组件的吸附操作方法。

Images