CN110489041A - 小程序拖动元素自动对齐的方法、装置、设备及介质 - Google Patents

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

Info

Publication number
CN110489041A
CN110489041A CN201910628297.9A CN201910628297A CN110489041A CN 110489041 A CN110489041 A CN 110489041A CN 201910628297 A CN201910628297 A CN 201910628297A CN 110489041 A CN110489041 A CN 110489041A
Authority
CN
China
Prior art keywords
parameter
label container
value
call back
back function
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.)
Granted
Application number
CN201910628297.9A
Other languages
English (en)
Other versions
CN110489041B (zh
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.)
Douyin Vision Co Ltd
Douyin Vision Beijing Co Ltd
Original Assignee
Beijing ByteDance 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 ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Priority to CN201910628297.9A priority Critical patent/CN110489041B/zh
Publication of CN110489041A publication Critical patent/CN110489041A/zh
Application granted granted Critical
Publication of CN110489041B publication Critical patent/CN110489041B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

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]
    • 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/04845—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 for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • 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
    • 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • 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

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本公开提供一种小程序拖动元素自动对齐的方法、装置、电子设备及计算机可读存储介质，其中，所述方法包括：构建标签容器，初始化所述标签容器；接收手势触控指令，根据所述手势触控指令更新所述标签容器的参数，基于更新后的标签容器参数确定所述元素的位置；根据所述元素的位置与基准位置的关系对齐所述元素。本公开使得小程序能够灵活的根据用户的手势动作将拖动元素自动对齐，极大的提高了小程序的用户体验。

Description

小程序拖动元素自动对齐的方法、装置、设备及介质
技术领域
本公开涉及计算机技术领域，具体为一种小程序拖动元素自动对齐的方法、装置、电子设备及计算机可读存储介质。
背景技术
随着小程序的发展，小程序的规模越来越大，一些小程序具有简单的排版功能，例如，图片编辑的小程序，可以拖拽某个元素，比如文字，来编辑并生成图片，但是现在的小程序编辑并没有拖拽系统的实现和自动对齐以及提示线，没有自动对齐以及提示线，用户无法感知自己拖动的元素是否对齐，因此，对于在小程序中如何实现拖拽以及自动对齐就成为亟待解决的技术问题。
发明内容
本公开的目的在于提供一种小程序拖动元素自动对齐的方法、装置、电子设备及计算机可读存储介质，能够解决如上至少问题之一。
根据本公开的实施方式，第一方面，本公开提供一种小程序元素自动对齐方法，包括：
构建标签容器，初始化所述标签容器；
接收手势触控指令，根据所述手势触控指令更新所述标签容器的参数，基于更新后的标签容器参数确定所述元素的位置；
根据所述元素的位置与基准位置的关系对齐所述元素。
可选的，所述标签容器包括列表数组、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中的程序而执行各种适当的动作和处理。在RAM 403中，还存储有电子设备操作所需的各种程序和数据。处理装置401、ROM 402以及RAM 403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。
通常，以下装置可以连接至I/O接口405：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置406；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置407；包括例如磁带、硬盘等的存储装置408；以及通信装置409。通信装置409可以允许电子设备400与其他设备进行无线或有线通信以交换数据。虽然图4示出了具有各种装置的电子设备，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置409从网络上被下载和安装，或者从存储装置408被安装，或者从ROM 402被安装。在该计算机程序被处理装置401执行时，执行本公开实施例的方法中限定的上述功能。
需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：获取至少两个网际协议地址；向节点评价设备发送包括所述至少两个网际协议地址的节点评价请求，其中，所述节点评价设备从所述至少两个网际协议地址中，选取网际协议地址并返回；接受所述节点评价设备返回的网际协议地址；其中，所获取的网际协议地址指示内容分发网络中的边缘节点。
或者，上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：接受包括至少两个网际协议地址的节点评价请求；从所述至少两个网际协议地址中，选取网际协议地址；返回选取出的网际协议地址；其中，接受到的网际协议地址指示内容分发网络中的边缘节点。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一获取单元还可以被描述为“获取至少两个网际协议地址的单元”。

Claims (10)

1.一种小程序元素自动对齐方法，其特征在于，包括：
构建标签容器，初始化所述标签容器；
接收手势触控指令，根据所述手势触控指令更新所述标签容器的参数，基于更新后的标签容器参数确定所述元素的位置；
根据所述元素的位置与基准位置的关系对齐所述元素。
2.根据权利要求1所述的方法，其特征在于，所述标签容器包括列表数组、x列数组、y列数组以及触控回调函数,所述初始化所述标签容器，包括：
初始化所述列表数组为空，所述列表数组用于储存被拖动的元素信息；
初始化所述x列数组为空，所述x列数组用于储存自动对齐的x方向的特征值；
初始化所述y列数组为空，所述y列数组用于储存自动对齐的y方向的特征值；
在所述标签容器下绑定所述触控回调函数。
3.根据权利要求2所述的方法，其特征在于，所述接收手势触控指令，根据所述手势触控指令更新标签容器参数，包括：
接收手势触控指令，基于所述手势触控指令生成第一回调函数和第二回调函数；
根据所述第一回调函数，判断所述元素是否为可拖动元素；
若是可拖动元素，所述元素标志位设为真，否则设为假。
4.根据权利要求3所述的方法，其特征在于，所述根据所述第一回调函数，判断所述元素是否为可拖动元素，包括：
根据所述第一回调函数获得当前所述元素的ID属性值；
根据所述ID属性值判断所述当前元素是否存在于所述列表数组；
若存在，则为可拖动元素，否则为不可拖动元素。
5.根据权利要求3或4所述的方法，其特征在于，还包括：
若所述元素为可拖动元素，则调用所述第二回调函数；
根据所述第二回调函数，获取所述元素移动后的X坐标参数值和Y坐标参数值。
6.根据权利要求5所述的方法，其特征在于，所述根据所述第二回调函数，获取所述元素移动后的X坐标参数值和Y坐标参数值，包括：
获取编辑区域左上角相对于屏幕左上角的第一位置参数；
获取当前所述元素相对于所述屏幕左上角的第二位置参数；
获取当前所述元素的宽度参数；
根据所述第一位置参数、第二位置参数以及宽度参数计算所述元素移动后的X坐标参数值和Y坐标参数值。
7.根据权利要求6所述的方法，其特征在于，所述根据所述元素的位置与基准位置的关系对齐所述元素，包括：
将所述列表数组中每一项参数的X坐标参数值和Y坐标参数值分别存入所述x列数组和y列数组；
将所述元素移动后的X坐标参数值和Y坐标参数值分别与所述x列数组和y列数组的每一项参数进行差值计算；
判断最小的所述差值是否在预设范围内；
若在预设范围内，则将所述元素移动后的X坐标参数值和Y坐标参数值设为产生该最小差值的所述参数的X坐标参数值和Y坐标参数值。
8.一种小程序拖动元素自动对齐装置，其特征在于，包括：
构建单元，用于构建标签容器，初始化所述标签容器；
接收单元，用于接收手势触控指令，根据所述手势触控指令更新所述标签容器的参数，基于更新后的标签容器参数确定所述元素的位置；
对齐单元，用于根据所述元素的位置与基准位置的关系对齐所述元素。
9.一种电子设备，其特征在于，包括处理器和存储器，所述存储器存储有能够被所述处理器执行的计算机程序指令，所述处理器执行所述计算机程序指令时，实现权利要求1-7任一所述的方法步骤。
10.一种计算机可读存储介质，其特征在于，存储有计算机程序指令，所述计算机程序指令在被处理器调用和执行时实现权利要求1-7任一所述的方法步骤。
CN201910628297.9A 2019-07-12 2019-07-12 小程序拖动元素自动对齐的方法、装置、设备及介质 Active CN110489041B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910628297.9A CN110489041B (zh) 2019-07-12 2019-07-12 小程序拖动元素自动对齐的方法、装置、设备及介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910628297.9A CN110489041B (zh) 2019-07-12 2019-07-12 小程序拖动元素自动对齐的方法、装置、设备及介质

Publications (2)

Publication Number Publication Date
CN110489041A true CN110489041A (zh) 2019-11-22
CN110489041B CN110489041B (zh) 2021-04-06

Family

ID=68546073

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910628297.9A Active CN110489041B (zh) 2019-07-12 2019-07-12 小程序拖动元素自动对齐的方法、装置、设备及介质

Country Status (1)

Country Link
CN (1) CN110489041B (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111381757A (zh) * 2020-03-11 2020-07-07 上海索辰信息科技有限公司 时序图活动回调处理系统及方法
CN114217866A (zh) * 2021-11-08 2022-03-22 阿里健康科技(中国)有限公司 小程序的使用方法及装置和电子设备
CN114327188A (zh) * 2021-12-30 2022-04-12 北京字跳网络技术有限公司 表单布局方法、装置、电子设备及计算机可读介质

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH10293674A (ja) * 1997-04-21 1998-11-04 Hokkaido Nippon Denki Software Kk ウィンドウの表示装置と方法
CN101082913A (zh) * 2006-09-01 2007-12-05 腾讯科技（深圳）有限公司 一种实现网页模块吸附拖放的方法及系统
CN102065227A (zh) * 2009-11-17 2011-05-18 新奥特（北京）视频技术有限公司 一种图形图像处理中对象水平和竖直对齐的方法和装置
US20110219297A1 (en) * 2010-03-08 2011-09-08 Canon Kabushiki Kaisha Layout editing apparatus and control method thereof and computer-readable storage medium
CN102736837A (zh) * 2011-05-10 2012-10-17 新奥特（北京）视频技术有限公司 一种基于网格的字幕编辑方法
US20130198666A1 (en) * 2012-02-01 2013-08-01 Michael Matas Overlay Images and Texts in User Interface
CN103995752A (zh) * 2014-06-16 2014-08-20 上海斐讯数据通信技术有限公司 模块间通知回调方法及模块交互结构
CN109885314A (zh) * 2019-02-28 2019-06-14 天津字节跳动科技有限公司 小程序自动布局方法和装置

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH10293674A (ja) * 1997-04-21 1998-11-04 Hokkaido Nippon Denki Software Kk ウィンドウの表示装置と方法
CN101082913A (zh) * 2006-09-01 2007-12-05 腾讯科技（深圳）有限公司 一种实现网页模块吸附拖放的方法及系统
CN102065227A (zh) * 2009-11-17 2011-05-18 新奥特（北京）视频技术有限公司 一种图形图像处理中对象水平和竖直对齐的方法和装置
US20110219297A1 (en) * 2010-03-08 2011-09-08 Canon Kabushiki Kaisha Layout editing apparatus and control method thereof and computer-readable storage medium
CN102736837A (zh) * 2011-05-10 2012-10-17 新奥特（北京）视频技术有限公司 一种基于网格的字幕编辑方法
US20130198666A1 (en) * 2012-02-01 2013-08-01 Michael Matas Overlay Images and Texts in User Interface
CN103995752A (zh) * 2014-06-16 2014-08-20 上海斐讯数据通信技术有限公司 模块间通知回调方法及模块交互结构
CN109885314A (zh) * 2019-02-28 2019-06-14 天津字节跳动科技有限公司 小程序自动布局方法和装置

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
ROLAN: "微信小程序新增拖动组件：movable-view", 《HTTP://WWW.WXAPP-UNION.COM/ARTICLE-2354-1.HTML》 *
神游一域: "拖动同级别元素显示辅助线，辅助对齐，吸附", 《HTTPS://WWW.CNBLOGS.COM/LOVEROWS/P/7251684.HTML》 *

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111381757A (zh) * 2020-03-11 2020-07-07 上海索辰信息科技有限公司 时序图活动回调处理系统及方法
CN114217866A (zh) * 2021-11-08 2022-03-22 阿里健康科技(中国)有限公司 小程序的使用方法及装置和电子设备
CN114217866B (zh) * 2021-11-08 2023-09-19 阿里健康科技(中国)有限公司 小程序的使用方法及装置和电子设备
CN114327188A (zh) * 2021-12-30 2022-04-12 北京字跳网络技术有限公司 表单布局方法、装置、电子设备及计算机可读介质
CN114327188B (zh) * 2021-12-30 2023-10-24 北京字跳网络技术有限公司 表单布局方法、装置、电子设备及计算机可读介质

Also Published As

Publication number Publication date
CN110489041B (zh) 2021-04-06

Similar Documents

Publication Publication Date Title
CN109729004A (zh) 会话消息置顶处理方法和装置
US11093693B2 (en) Hierarchical navigation control
CN110362248A (zh) 小程序侧边菜单栏的控制方法、装置、设备及介质
CN110489041A (zh) 小程序拖动元素自动对齐的方法、装置、设备及介质
CN103729065A (zh) 触控操作映射到实体按键的系统及方法
CN109828807A (zh) 小程序手势切换页面的方法、装置、电子设备及存储介质
CN111522838B (zh) 地址相似度计算方法及装置
CN109800041A (zh) 小程序背景模糊实现方法、装置、电子设备及存储介质
CN102054217A (zh) 基于元模型的工具中的实体变形
CN109359281A (zh) 动态表单生成方法及装置
CN110389899A (zh) 检测js程序的api数据类型的方法装置、介质和设备
CN109446092A (zh) 对用户界面ui元素进行标识的方法、装置及电子设备
CN110489165A (zh) 获取调用栈栈帧指令偏移的方法、装置、介质和设备
CN109799945A (zh) 小程序长列表滚动显示方法、装置、电子设备及存储介质
CN110489158A (zh) 对代码托管平台进行优化的方法、装置、介质和电子设备
US9736032B2 (en) Pattern-based validation, constraint and generation of hierarchical metadata
CN110223615B (zh) 一种广告展示控制方法、装置、介质及广告推送服务器
CN110188782A (zh) 图像相似性确定方法、装置、电子设备及可读存储介质
CN109460543A (zh) 一种逻辑表达式的录入方法、装置、电子设备及可读介质
CN107704104A (zh) 表单输入项联想方法、系统、设备及存储介质
JP2022549872A (ja) ユーザーインターフェース展示方法、装置、コンピュータ読み取り可能な媒体及び電子装置
CN111324258A (zh) 多级下拉菜单配置项内容生成方法、装置、设备和介质
US20120159365A1 (en) Presenting a navigation order of shapes
CN109582269A (zh) 物理拼接屏显示方法、装置及终端设备
CN109669589A (zh) 文档编辑方法和装置

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
GR01 Patent grant
GR01 Patent grant
CP01 Change in the name or title of a patent holder
CP01 Change in the name or title of a patent holder

Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Patentee after: Douyin Vision Co.,Ltd.

Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Patentee before: Tiktok vision (Beijing) Co.,Ltd.

Address after: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Patentee after: Tiktok vision (Beijing) Co.,Ltd.

Address before: 100041 B-0035, 2 floor, 3 building, 30 Shixing street, Shijingshan District, Beijing.

Patentee before: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd.