小程序拖动元素自动对齐的方法、装置、设备及介质与流程

本公开涉及计算机技术领域，具体为一种小程序拖动元素自动对齐的方法、装置、电子设备及计算机可读存储介质。

背景技术：

随着小程序的发展，小程序的规模越来越大，一些小程序具有简单的排版功能，例如，图片编辑的小程序，可以拖拽某个元素，比如文字，来编辑并生成图片，但是现在的小程序编辑并没有拖拽系统的实现和自动对齐以及提示线，没有自动对齐以及提示线，用户无法感知自己拖动的元素是否对齐，因此，对于在小程序中如何实现拖拽以及自动对齐就成为亟待解决的技术问题。

技术实现要素：

本公开的目的在于提供一种小程序拖动元素自动对齐的方法、装置、电子设备及计算机可读存储介质，能够解决如上至少问题之一。

根据本公开的实施方式，第一方面，本公开提供一种小程序元素自动对齐方法，包括：

构建标签容器，初始化所述标签容器；

接收手势触控指令，根据所述手势触控指令更新所述标签容器的参数，基于更新后的标签容器参数确定所述元素的位置；

根据所述元素的位置与基准位置的关系对齐所述元素。

可选的，所述标签容器包括列表数组、x列数组、y列数组以及触控回调函数,所述初始化所述标签容器，包括：

初始化所述列表数组为空，所述列表数组用于储存被拖动的元素信息；

初始化所述x列数组为空，所述x列数组用于储存自动对齐的x方向的特征值；

初始化所述y列数组为空，所述y列数组用于储存自动对齐的y方向的特征值；

在所述标签容器下绑定所述触控回调函数。

可选的，所述接收手势触控指令，根据所述手势触控指令更新标签容器参数，包括：

接收手势触控指令，基于所述手势触控指令生成第一回调函数和第二回调函数；

根据所述第一回调函数，判断所述元素是否为可拖动元素；

若是可拖动元素，所述元素标志位设为真，否则设为假。

可选的，所述根据所述第一回调函数，判断所述元素是否为可拖动元素，包括：

根据所述第一回调函数获得当前所述元素的id属性值；

根据所述id属性值判断所述当前元素是否存在于所述列表数组；

若存在，则为可拖动元素，否则为不可拖动元素。

可选的，还包括：

若所述元素为可拖动元素，则调用所述第二回调函数；

根据所述第二回调函数，获取所述元素移动后的x坐标参数值和y坐标参数值。

可选的，所述根据所述第二回调函数，获取所述元素移动后的x坐标参数值和y坐标参数值，包括：

获取编辑区域左上角相对于屏幕左上角的第一位置参数；

获取当前所述元素相对于所述屏幕左上角的第二位置参数；

获取当前所述元素的宽度参数；

根据所述第一位置参数、第二位置参数以及宽度参数计算所述元素移动后的x坐标参数值和y坐标参数值。

可选的，所述根据所述元素的位置与基准位置的关系对齐所述元素，包括：

将所述列表数组中每一项参数的x坐标参数值和y坐标参数值分别存入所述x列数组和y列数组；

将所述元素移动后的x坐标参数值和y坐标参数值分别与所述x列数组和y列数组的每一项参数进行差值计算；

判断最小的所述差值是否在预设范围内；

若在预设范围内，则将所述元素移动后的x坐标参数值和y坐标参数值设为产生该最小差值的所述参数的x坐标参数值和y坐标参数值。

根据本公开的实施方式，第二方面，本公开提供一种小程序拖动元素自动对齐装置，包括：

构建单元，用于构建标签容器，初始化所述标签容器；

接收单元，用于接收手势触控指令，根据所述手势触控指令更新所述标签容器的参数，基于更新后的标签容器参数确定所述元素的位置；

对齐单元，用于根据所述元素的位置与基准位置的关系对齐所述元素。

根据本公开的实施方式，第三方面，本公开提供一种电子设备，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的计算机程序指令，所述处理器执行所述计算机程序指令时，实现第一方面任一所述的方法步骤。

根据本公开的实施方式，第四方面，本公开提供一种计算机可读存储介质，其特征在于，存储有计算机程序指令，所述计算机程序指令在被处理器调用和执行时实现第一方面任一所述的方法步骤。

与现有技术相比，本公开实施例的有益效果是：

本公开实施例通过对小程序页面的技术指标进行改进，使得小程序能够通过拖拽素材编辑图片的元素，使得拖拽后的元素能够自动对齐，使得小程序的功能种类更加丰富，极大的提高了小程序的用户体验，从而使得小程序不仅在使用功能上满足了用户需求，而且在手势体验上更加人性化，提升了小程序的应用价值。

附图说明

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

图1为本公开一实施例提供的小程序拖动元素自动对齐方法流程示意图；

图2为本公开一实施例提供的小程序拖动元素自动对齐方法执行流程示意图；

图3为本公开一实施例提供的小程序拖动元素自动对齐装置的结构框图；

图4为本公开实施例提供的电子设备的结构示意图。

具体实施方式

为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

在本公开实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义，“多种”一般包含至少两种，但是不排除包含至少一种的情况。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

应当理解，尽管在本公开实施例中可能采用术语第一、第二、第三等来描述技术名称，但这些技术名称不应限于这些术语。这些术语仅用来将技术名称区分开。例如，在不脱离本公开实施例范围的情况下，第一校验签名也可以被称为第二校验签名，类似地，第二校验签名也可以被称为第一校验签名。

取决于语境，如在此所使用的词语“如果”、“若”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的商品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种商品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的商品或者系统中还存在另外的相同要素。

另外，下述各实施例中的步骤时序仅为一种举例，而非严格限定。

实施例1

根据本公开的实施方式，第一方面，本公开提供一种小程序拖动元素自动对齐方法，所述小程序，是一种不需要下载安装即可使用的应用程序，使用方便简洁。用户在使用时只需要点击小程序图标或在另一程序使用过程中(例如微信)加载使用即可。该激活可以为任何一种常规的激活方式，包括但不限于鼠标单击、双击，手指的触控单击、双击等，对触控指令的方式不做具体的限制。具体包括如下方法步骤，如图1所示：

步骤s102：构建标签容器，初始化标签容器,标签容器包括列表数组、x列数组、y列数组以及触控回调函数。

初始化标签容器包括：初始化列表数组为空，列表数组用于储存被拖动的元素信息；初始化x列数组为空，x列数组用于储存自动对齐的x方向的特征值；初始化y列数组为空，y列数组用于储存自动对齐的y方向的特征值；在标签容器下绑定触控回调函数。

具体的操作如下，如图2所示：

新建一个<view>标签作为容器，设置其样式position为relative，这样该标签的子元素为绝对定位时，会按照该元素的左上角作为锚点，设置其id为'drag-panel'，此时显示屏幕的左上角默认为原点。

初始化elelist为空数组，该数组用于储存被拖动的元素信息。数组中的每一项必须要有x属性、y属性，以上两个属性用于表示元素的位置，还要有width属性、height属性，以上属性用于表示元素的大小，还要有zindex属性，用于表示元素的层级关系，zindex越大，元素越在上层显示，以及id属性，用于标识每个元素。

初始化alignx为空数组，该数组用于储存自动对齐的x方向的特征值，aligny为空数组，该数组用于储存自动对齐的y方向的特征值。

利用小程序的列表渲染，在容器的<view>标签里，渲染出数组中的每一项，其中设置每一项的样式position为absolute，这样该元素为绝对定位，其位置由其样式的left和top决定，并且以父元素的左上角为原点。设置其样式left为该项的x属性的值，top为该项的y属性的值，设置其样式的width属性为该列表项的width属性的值，height属性为该列表项的height属性的值。设置其样式的zindex属性为该列表项的zindex属性的值。设置其标签的，id属性为该列表项id属性的值。

为容器绑定touchstart，touchmove的回调函数，touchstart表示触控开始，touchmove表示触控移动。

步骤s104：接收手势触控指令，根据手势触控指令更新标签容器参数，基于更新的标签容器参数确定拖动元素的位置。

当手指在编辑区域触控时，会返回触控指令，例如clientx和clienty，表示距离页面可显示区域(屏幕除去导航条)左上角距离，横向为x轴，纵向为y轴的值。

可选的，接收手势触控指令，根据手势触控指令更新标签容器参数，包括：

接收手势触控指令，基于手势触控指令生成第一回调函数touchstart、第二回调函数touchmove；根据第一回调函数，判断触控元素是否为可拖动元素；若是可拖动元素，触控元素标志位设为真，否则设为假。

其中，触控元素是当前接收到手势触控指令的元素，该元素在初审接收到触控指令时，需要判断是否属于可移动的元素还是不可移动的元素，例如固定不动的标签、控件等都属于不可移动的元素。

可选的，根据第一回调函数，判断触控元素是否为可拖动元素，包括：根据第一回调函数获得当前触控元素的id属性值；根据id属性值判断当前触控元素是否存在于列表数组；若存在，则为可拖动元素，否则为不可拖动元素。

如何判断当前触控元素是否属于可拖动元素，一种实施方式为通过白名单的方式进行确定，例如通过获得当前触控元素的id，然后查找白名单判断该触控元素是否为可拖动元素。

具体的，在touchstart第一回调函数中，得到事件对象，判断其当前拖动元素currenttarget的id属性的值，是否与在elelist里面有列表的id属性的值相等，如果有，则说明，用户手指按在了可以被拖拽的元素上，设置一个标志位candrag为true，设置一个变量dragedid为currenttarget的id属性的值；如果没有，则设置candrag为false。

可选的，该方法还包括：若触控元素为可拖动元素，则调用第二回调函数；根据第二回调函数，获取触控元素移动后的x、y坐标参数值。

可选的，根据第二回调函数，获取触控元素移动后的x、y坐标参数值，包括：获取编辑区域左上角相对于屏幕左上角的第一位置参数；获取当前触控元素相对于屏幕左上角的第二位置参数；获取当前触控元素的宽度参数；根据第一位置参数、第二位置参数以及宽度参数计算触控元素移动后的x、y坐标参数值。

具体的，在boundingclientrect回调函数中，获得拖动面板(编辑区域)节点的顶点top，左边界left值，分别储存到变量paneltop和panelleft中。

在touchmove回调函数中，判断变量candrag是否为true，如果为true，则说明拖动元素进行了移动，否则直接结束。

根据touchmove回调函数得到的事件对象，获得手指触摸的clientx和clienty的值，clientx和clienty表示距离页面可显示区域(屏幕除去导航条)左上角距离，横向为x轴，纵向为y轴。然后通过变量dragedid，从elelist列表中获得被拖动元素关联的列表项，设为变量currentitem。然后将变量newx设为clientx-panelleft-该列表项的width/2，变量newy设为clienty-paneltop-该列表项的height/2，同时进行下一步自动对齐的操作。

步骤s106：根据拖动元素的位置与基准位置的关系实现拖动元素的自动对齐。

可选的，根据拖动元素的位置与基准位置的关系实现拖动元素的自动对齐，包括：将列表数组中每一项参数的x、y坐标参数值分别存入x列数组、y列数组；将触控元素移动后的x、y坐标参数值分别与x列数组、y列数组的每一项参数进行差值计算；判断最小的差值是否在预设范围内；若在预设范围内，则将触控元素移动后的x、y坐标参数值设为产生该最小差值的参数的x、y坐标参数值。

具体的，遍历elelist列表的每一项参数，将每一项参数的x和x+width的值存入alignx列表，将每一项参数的y和y+height的值存入aligny列表。

遍历alignx列表，判断当前元素currentitem的newx属性的值，与alignx的某一项的值，是否在误差内相等，例如，alignx-newx的绝对值小于5，则相等。如果相等，则设newx为alignx该项的值。变量aligny列表，判断currentitem的newy属性的值，与aligny的某一项的值，是否在误差内相等，例如，aligny-newy的绝对值小于5，则相等。如果相等，则设newy为aligny该项的值。这样该元素的边缘延长线会和相等值的元素的边缘的延长线重合，这样就实现了对齐。

然后将当前移动元素currentitem的x属性的值设为newx，当前移动元素currentitem的y设为newy，然后小程序重新根据elelist渲染后，这样被拖动元素会跟随手指移动。同时会根据其他元素的位置来调整自己的位置。

本公开实施例通过对小程序页面的技术指标进行改进，使得小程序能够通过拖拽素材编辑图片的元素，使得拖拽后的元素能够自动对齐，使得小程序的功能种类更加丰富，极大的提高了小程序的用户体验，从而使得小程序不仅在使用功能上满足了用户需求，而且在手势体验上更加人性化，提升了小程序的应用价值。

实施例2

如图3所示，给出了本公开实施例的小程序拖动元素自动对齐装置结构示意图，该实施例用于实现实施例1所述方法，其中相同的结构、功能、效果的描述参见实施例1，此处不再赘述。具体的，根据本公开的实施方式，本公开提供一种小程序拖动元素自动对齐装置，包括构建单元302、接收单元304、对齐单元306，具体如下：

构建单元302，用于构建标签容器，初始化标签容器,标签容器包括列表数组、x列数组、y列数组以及触控回调函数；

接收单元304，用于接收手势触控指令，根据手势触控指令更新标签容器参数，基于更新的标签容器参数确定拖动元素的位置；

对齐单元306，用于根据拖动元素的位置与基准位置的关系实现拖动元素的自动对齐。

可选的，构建单元302还用于：初始化列表数组为空，列表数组用于储存被拖动的元素信息；初始化x列数组为空，x列数组用于储存自动对齐的x方向的特征值；初始化y列数组为空，y列数组用于储存自动对齐的y方向的特征值；在标签容器下绑定触控回调函数。

可选的，接收单元304还用于：接收手势触控指令，基于手势触控指令生成第一回调函数、第二回调函数；根据第一回调函数，判断触控元素是否为可拖动元素；若是可拖动元素，触控元素标志位设为真，否则设为假。

可选的，接收单元304还用于：根据第一回调函数获得当前触控元素的id属性值；根据id属性值判断当前触控元素是否存在于列表数组；若存在，则为可拖动元素，否则为不可拖动元素。

可选的，对齐单元306还用于：若触控元素为可拖动元素，则调用第二回调函数；根据第二回调函数，获取触控元素移动后的x、y坐标参数值。

可选的，对齐单元306还用于：获取编辑区域左上角相对于屏幕左上角的第一位置参数；获取当前触控元素相对于屏幕左上角的第二位置参数；获取当前触控元素的宽度参数；根据第一位置参数、第二位置参数以及宽度参数计算触控元素移动后的x、y坐标参数值。

可选的，对齐单元306还用于：将列表数组中每一项元素的x、y坐标参数值分别存入x列数组、y列数组；将触控元素移动后的x、y坐标参数值分别与x列数组、y列数组的每一项元素进行差值计算；判断最小的差值是否在预设范围内；若在预设范围内，则将触控元素移动后的x、y坐标参数值设为产生该最小差值的元素的x、y坐标参数值。

本公开实施例通过对小程序页面的技术指标进行改进，使得小程序能够通过拖拽素材编辑图片的元素，使得拖拽后的元素能够自动对齐，使得小程序的功能种类更加丰富，极大的提高了小程序的用户体验，从而使得小程序不仅在使用功能上满足了用户需求，而且在手势体验上更加人性化，提升了小程序的应用价值。

实施例3

根据本公开的实施方式，第三方面，本公开提供一种电子设备，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的计算机程序指令，所述处理器执行所述计算机程序指令时，实现第一方面任一所述的方法步骤。

实施例4

根据本公开的实施方式，第四方面，本公开提供一种计算机可读存储介质，存储有计算机程序指令，所述计算机程序指令在被处理器调用和执行时实现第一方面任一所述的方法步骤。

下面参考图4，其示出了适于用来实现本公开实施例的电子设备的结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接受器、pda(个人数字助理)、pad(平板电脑)、pmp(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字tv、台式计算机等等的固定终端。图4示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图4所示，电子设备可以包括处理装置(例如中央处理器、图形处理器等)401，其可以根据存储在只读存储器(rom)402中的程序或者从存储装置408加载到随机访问存储器(ram)403中的程序而执行各种适当的动作和处理。在ram403中，还存储有电子设备操作所需的各种程序和数据。处理装置401、rom402以及ram403通过总线404彼此相连。输入/输出(i/o)接口405也连接至总线404。

通常，以下装置可以连接至i/o接口405：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置406；包括例如液晶显示器(lcd)、扬声器、振动器等的输出装置407；包括例如磁带、硬盘等的存储装置408；以及通信装置409。通信装置409可以允许电子设备400与其他设备进行无线或有线通信以交换数据。虽然图4示出了具有各种装置的电子设备，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置409从网络上被下载和安装，或者从存储装置408被安装，或者从rom402被安装。在该计算机程序被处理装置401执行时，执行本公开实施例的方法中限定的上述功能。

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

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：获取至少两个网际协议地址；向节点评价设备发送包括所述至少两个网际协议地址的节点评价请求，其中，所述节点评价设备从所述至少两个网际协议地址中，选取网际协议地址并返回；接受所述节点评价设备返回的网际协议地址；其中，所获取的网际协议地址指示内容分发网络中的边缘节点。

或者，上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：接受包括至少两个网际协议地址的节点评价请求；从所述至少两个网际协议地址中，选取网际协议地址；返回选取出的网际协议地址；其中，接受到的网际协议地址指示内容分发网络中的边缘节点。

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

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

描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。