Dragging arrangement method and device for element blocks, equipment and storage medium

Abstract

The invention relates to the technical field of computers, and provides an element block dragging arrangement method and device, equipment and a storage medium. The method comprises the steps of presenting a visual area of an operation interface of the applet, and obtaining a selected target element block in response to a selection operation triggered for a plurality of element blocks; and in response to a dragging operation triggered for the target element block, moving the target element block based on an operation track of the dragging operation. When it is determined that the draggable distance between the newest position of the target element block and the edge position of the visible area reaches a first distance threshold value, the operation interface is rolled based on the moving direction of the target element block, and the part, meeting the moving distance of the target element block, in the invisible area of the operation interface is displayed. And in response to a release operation triggered for the target element block, inserting the target element block based on an operation position of the release operation. According to the method, the problem that the dragging operation of the element block can only be realized in the visible area in the related technology can be solved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computers, and provides an element block dragging arrangement method and device, equipment and a storage medium. BACKGROUND

[0002] Currently, in the operation interface of an applet, an element block representing a function or a business supported by the applet can be set in an embedded manner, so that a user can adjust the placement position of the element block in the operation interface through a dragging operation, thereby achieving the purpose of personalized setting.

[0003] However, there is a scenario in which the operation interface of an applet includes too many element blocks, and the screen of a mobile device can not be large enough to present the entire operation interface. In this case, the screen can only display part of the operation interface, which divides the operation interface into a visible area and a non-visible area. The area that can be displayed on the screen is the visible area, and the rest of the operation interface other than the visible area is hidden as the non-visible area. At this time, if an element block in the non-visible area needs to be displayed, the non-visible area can be scrolled to the screen of the mobile device to be displayed by sliding a scroll bar, thereby adjusting the element block to be displayed on the screen.

[0004] However, under the related art, the dragging operation of an element block can only be implemented in the visible area. Therefore, in the above scenario, if the placement position of all element blocks in the operation interface needs to be personalized, the user needs to manually scroll the screen to convert the non-visible area into the visible area and then perform the dragging operation.

[0005] For example, in the operation interface of an applet, if an element block needs to be dragged from position A in the visible area to position B in the non-visible area, the element block needs to be dragged to the boundary between the visible area and the non-visible area first, and then the non-visible area needs to be converted into the visible area by scrolling the screen up and down or left and right, and then the dragging operation needs to be continued. If the operation cannot be completed at one time, the above operation needs to be repeated until the element block is placed at position B.

[0006] As can be seen, the dragging method in the related art greatly increases the complexity of the operation of implementing personalized placement of element blocks and reduces the operation efficiency. SUMMARY

[0007] Embodiments of the present application provide an element block dragging arrangement method, device, equipment and storage medium to solve the problem that the dragging operation of an element block can only be implemented in the visible area in the related art.

[0008] In a first aspect, an embodiment of the present application provides an element block dragging arrangement method, comprising:

[0009] The visible area that presents the operation interface of the mini-program; the visible area includes multiple element blocks;

[0010] In response to a selection operation triggered for the plurality of element blocks, the selected target element block is obtained;

[0011] In response to a drag operation triggered on the target element block, the target element block is moved based on the operation trajectory of the drag operation;

[0012] When the draggable distance between the latest position of the target element block and the edge position of the visible area reaches a first distance threshold, the operation interface is scrolled based on the movement direction of the target element block, and the portion of the invisible area of ​​the operation interface that matches the movement distance of the target element block is displayed.

[0013] In response to a release operation triggered for the target element block, the target element block is inserted based on the operation position of the release operation.

[0014] In one possible implementation, the operation interface includes at least one partition; the visible area of ​​the operation interface includes: obtaining historical partition results and historical arrangement results stored when the operation interface was last closed; the historical partition results include: the partitions of each of the plurality of element blocks, and the historical arrangement results include: the arrangement order of the plurality of element blocks in their respective corresponding partitions; determining the initial position of each element block in the operation interface based on the partition of each element block and its arrangement order in the corresponding partition, and arranging the corresponding element blocks in the operation interface according to their initial positions; determining the element blocks included in the visible area based on the initial position of the visible area in the operation interface, and presenting the corresponding element blocks in the visible area.

[0015] In one possible implementation, after moving the target element block based on the drag operation trajectory, the method further includes: periodically acquiring the latest position of the target element block during the movement of the target element block; determining the latest position of each of the plurality of element blocks based on the latest position of the target element block and a preset transposition rule; and updating the visible area of ​​the operation interface based on the latest position of each of the plurality of element blocks.

[0016] In one possible implementation, the first distance threshold is determined by the following method: obtaining the number of reference pixels of the visible area in the scrollable direction of the operation interface; the scrollable direction is a horizontal or vertical direction; determining the first distance threshold based on the number of reference pixels and the moving speed of the target element block; the first distance threshold is positively correlated with the moving speed.

[0017] In one possible implementation, obtaining the reference number of the visible area in the scrollable direction of the operation interface includes: obtaining a reference length and a logical pixel width of the visible area in the scrollable direction of the operation interface; determining a device pixel ratio based on the logical pixel width and the screen pixel width; the logical pixel width representing a pixel width determined based on the screen of a fixed device; and determining the reference number of pixels in the scrollable direction of the operation interface based on the reference length and the device pixel ratio.

[0018] In one possible implementation, scrolling the interface based on the movement direction of the target element block includes: adjusting the interface scrolling speed based on the draggable distance between the latest position of the target element block and the edge position of the visible area; the interface scrolling speed is negatively correlated with the draggable distance; and scrolling the interface based on the movement direction of the target element block and the interface scrolling speed.

[0019] In one possible implementation, inserting the target element block based on the operation position of the release operation in response to a release operation triggered on the target element block includes: obtaining a release distance between the operation position and the initial position of the target element block in response to a release operation triggered on the target element block; the initial position being the position of the target element block when the visible area of ​​the operation interface is displayed; inserting the target element block into the empty space closest to the operation position when the release distance is greater than a second distance threshold; and returning the target element block to its initial position when the release distance is not greater than the second distance threshold.

[0020] Secondly, embodiments of this application also provide a drag-and-drop arrangement device for element blocks, comprising:

[0021] The display unit is used to present the visible area of ​​the mini-program's operation interface; the visible area includes multiple element blocks;

[0022] A drag-and-drop unit is configured to: obtain a selected target element block in response to a selection operation triggered on the plurality of element blocks; move the target element block based on the operation trajectory of the drag operation in response to a drag operation triggered on the target element block; when the draggable distance between the latest position of the target element block and the edge position of the visible area reaches a first distance threshold, scroll the operation interface based on the movement direction of the target element block to display a portion of the invisible area of ​​the operation interface that matches the movement distance of the target element block; and insert the target element block based on the operation position of the release operation in response to a release operation triggered on the target element block.

[0023] In one possible implementation, the operation interface includes at least one partition; when the display unit presents the visible area of ​​the operation interface, the acquisition unit is configured to: acquire the historical partition results and historical arrangement results stored when the operation interface was last closed; the historical partition results include: the partitions of each of the plurality of element blocks, and the historical arrangement results include: the arrangement order of the plurality of element blocks in their respective corresponding partitions;

[0024] The display unit is configured to determine the initial position of each element block on the operation interface based on the partition of each element block and the arrangement order in the corresponding partition, and to arrange the corresponding element blocks in the operation interface according to the initial position of each element block; and to determine the element blocks included in the visible area based on the initial position of the visible area on the operation interface, and to present the corresponding element blocks in the visible area.

[0025] In one possible implementation, after the drag unit moves the target element block based on the operation trajectory of the drag operation, the acquisition unit is further configured to: periodically acquire the latest position of the target element block during the movement of the target element block; the drag unit is configured to determine the latest position of each of the plurality of element blocks based on the latest position of the target element block and a preset transposition rule; and update the visible area of ​​the operation interface based on the latest position of each of the plurality of element blocks.

[0026] In one possible implementation, the first distance threshold is determined by the following method: obtaining the number of reference pixels of the visible area in the scrollable direction of the operation interface; the scrollable direction is a horizontal or vertical direction; determining the first distance threshold based on the number of reference pixels and the moving speed of the target element block; the first distance threshold is positively correlated with the moving speed.

[0027] In one possible implementation, when the acquisition unit acquires the reference number of pixels of the visible area in the scrollable direction of the operation interface, it is specifically used to: acquire the reference length and logical pixel width of the visible area in the scrollable direction of the operation interface; determine the device pixel ratio based on the logical pixel width and the screen pixel width; the logical pixel width represents the pixel width determined based on the screen of a fixed device; and determine the reference number of pixels in the scrollable direction of the operation interface based on the reference length and the device pixel ratio.

[0028] In one possible implementation, when the dragging unit scrolls the interface based on the movement direction of the target element block, it is specifically used to: adjust the interface scrolling speed of the interface based on the draggable distance between the latest position of the target element block and the edge position of the visible area; the interface scrolling speed is negatively correlated with the draggable distance; and scroll the interface based on the movement direction of the target element block and the interface scrolling speed.

[0029] In one possible implementation, the drag unit, in response to a release operation triggered on the target element block, inserts the target element block based on the operation position of the release operation, specifically by: obtaining a release distance between the operation position and the initial position of the target element block in response to a release operation triggered on the target element block; the initial position being the position of the target element block when the visible area of ​​the operation interface is displayed; inserting the target element block into the empty space closest to the operation position when the release distance is greater than a second distance threshold; and returning the target element block to its initial position when the release distance is not greater than the second distance threshold.

[0030] Thirdly, embodiments of this application also provide a computer device, including a processor and a memory, wherein the memory stores program code, and when the program code is executed by the processor, the processor performs the steps of any of the above-described drag-and-drop arrangement methods for element blocks.

[0031] Fourthly, embodiments of this application also provide a computer-readable storage medium including program code, which, when the program product is run on a computer device, is used to cause the computer device to perform the steps of any of the above-described drag-and-drop arrangement methods for element blocks.

[0032] Fifthly, embodiments of this application also provide a computer program product, including computer instructions, which are executed by a processor using the steps of any of the above-described drag-and-drop arrangement methods for element blocks.

[0033] The beneficial effects of this application are as follows:

[0034] This application provides a method, apparatus, device, and storage medium for dragging and arranging element blocks. The method includes: presenting a visible area of ​​a mini-program's interface; obtaining a selected target element block in response to a selection operation triggered for multiple element blocks; moving the target element block based on the operation trajectory of the drag operation in response to a drag operation triggered for the target element block; when the draggable distance between the latest position of the target element block and the edge position of the visible area reaches a first distance threshold, scrolling the interface based on the movement direction of the target element block to display a portion of the invisible area of ​​the interface that matches the movement distance of the target element block; and inserting the target element block based on the operation position of the release operation in response to a release operation triggered for the target element block.

[0035] In this embodiment, since the operation interface of the mini-program can be scrolled according to the movement direction of the target element block, the part that needs to be displayed in the invisible area can be shown, thereby achieving the technical effect of dragging the element block from the visible area to the invisible area. Compared with the prior art, there is no need to manually scroll the operation interface, which can reduce the cumbersomeness of operation, thereby improving the smoothness of operation and the user experience. Furthermore, since the part that needs to be displayed in the invisible area can be shown, the user can more flexibly arrange the placement order of each element block, thereby improving the user's work efficiency.

[0036] Furthermore, since the interface only scrolls when the draggable distance reaches the first distance threshold, unnecessary scrolling of the interface can be reduced, thus reducing the amount of computation and avoiding stuttering and jumping during dragging and arranging.

[0037] Other features and advantages of this application will be set forth in the description which follows, and will be apparent in part from the description, or may be learned by practicing the application. The objectives and other advantages of this application may be realized and obtained by means of the structures particularly pointed out in the written description, claims, and drawings. Attached Figure Description

[0038] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments of this application and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings:

[0039] Figure 1 This is an optional schematic diagram of an application scenario in the embodiments of this application;

[0040] Figure 2 A flowchart illustrating the method for dragging and arranging element blocks according to an embodiment of this application;

[0041] Figure 3A schematic diagram of the partitions of the user interface provided in the embodiments of this application;

[0042] Figure 4 A schematic diagram of a container provided in an embodiment of this application;

[0043] Figure 5 A schematic diagram of buttons for the characterization operation interface provided in the embodiments of this application;

[0044] Figure 6 This is a schematic diagram of the user interface during drag-and-drop operations provided in an embodiment of this application;

[0045] Figure 7 A schematic diagram illustrating the maximum limiting distance provided in the embodiments of this application;

[0046] Figure 8 Another schematic diagram of the user interface during drag-and-drop operations provided in the embodiments of this application;

[0047] Figure 9 This is a schematic diagram of the operational boundaries provided for an embodiment of this application;

[0048] Figure 10 This is a schematic diagram of the operation interface during the release operation provided in the embodiments of this application;

[0049] Figure 11 A schematic diagram of the data processing flow for the drag-and-drop arrangement method of element blocks provided in the embodiments of this application;

[0050] Figure 12 An exemplary flowchart of the drag-and-drop arrangement operation provided in an embodiment of this application;

[0051] Figure 13 A schematic diagram of a drag-and-drop arrangement device for element blocks provided in an embodiment of this application;

[0052] Figure 14 This is a schematic diagram of the hardware structure of a computer device according to an embodiment of this application;

[0053] Figure 15 This is a schematic diagram of the hardware structure of another computer device that applies an embodiment of this application. Detailed Implementation

[0054] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of this application will be clearly and completely described below with reference to the accompanying drawings of the embodiments of this application. Obviously, the described embodiments are only some embodiments of the technical solutions of this application, and not all embodiments. Based on the embodiments recorded in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the technical solutions of this application.

[0055] The design concept of the embodiments of this application is briefly introduced below:

[0056] Currently, in the operation interface of a mini-program, the elements that represent the functions or business functions supported by the mini-program can be set in an embedded manner. Therefore, users can adjust the placement of the elements in the operation interface by dragging and dropping, thereby achieving the purpose of personalized settings.

[0057] However, a scenario exists where a mini-program's interface contains too many elements, potentially causing the mobile device's screen to be insufficient to display the entire interface. In this case, the screen can only display a portion of the interface, dividing it into visible and invisible areas. The area that can be displayed on the screen is the visible area, while the rest is hidden as the invisible area. To display elements from the invisible area, one can use a scroll bar to move the invisible area onto the mobile device's screen, thus adjusting the display of the desired elements.

[0058] In related technologies, although there are scenarios where drag-and-drop sorting of mobile desktop applications can allow an application to be dragged from one page to another, in this scenario, different interfaces on the desktop do not belong to the same operation interface, so it is not applicable to the element blocks in the above scenario.

[0059] Therefore, under the relevant technology, for an operation interface, the drag operation of element blocks can only be implemented within the visible area. So, if it is necessary to personalize the placement of all element blocks in the same operation interface, it is necessary to manually scroll the screen to convert the invisible area into the visible area before performing the drag operation.

[0060] For example, in the operation interface of a mini-program, if you need to drag an element block from position A in the visible area to position B in the invisible area, you need to first drag the element to the boundary between the visible and invisible areas, and then scroll the screen up and down or left and right to make the invisible area visible before continuing to drag. If the operation cannot be completed in one attempt, you need to repeat the above operation until the element block is placed at position B.

[0061] It is evident that the drag-and-drop method in related technologies greatly increases the complexity of personalized element placement and reduces operational efficiency.

[0062] In view of this, embodiments of this application provide a method, apparatus, device, and storage medium for dragging and arranging element blocks. The method includes: presenting a visible area of ​​an operation interface; obtaining a selected target element block in response to a selection operation triggered on multiple element blocks in the visible area; moving the target element block based on the operation trajectory of the drag operation in response to a drag operation triggered on the target element block; when the draggable distance between the latest position of the target element block and the edge position of the visible area reaches a first distance threshold, scrolling the operation interface based on the movement direction of the target element block to display a portion of the invisible area of ​​the operation interface that matches the movement distance of the target element block; and inserting the target element block based on the operation position of the release operation in response to a release operation triggered on the target element block.

[0063] Using the method described above, the mini-program's interface can be scrolled according to the movement direction of the target element block, thus revealing the parts that need to be displayed in the previously invisible areas. Compared to existing technologies, this eliminates the need for manual scrolling, reducing the complexity of operations and improving the smoothness of operation and user experience. Furthermore, because the parts that need to be displayed in the previously invisible areas can be shown, users can more flexibly arrange the placement order of various element blocks, thereby improving their work efficiency.

[0064] Furthermore, since the interface only scrolls when the draggable distance reaches the first distance threshold, unnecessary scrolling of the interface can be reduced, thus reducing the amount of computation and avoiding stuttering and jumping during dragging and arranging.

[0065] The preferred embodiments of this application are described below with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are for illustration and explanation only and are not intended to limit this application. Furthermore, the embodiments and features in the embodiments of this application can be combined with each other without conflict.

[0066] Figure 1One application scenario is illustrated, including a terminal device 110 and a server 120. Each terminal device 110 establishes a communication connection with the server 120 via a wired or wireless network. The terminal device 110 can display a visible area of ​​an interface, which includes multiple element blocks. Then, in response to a selection operation triggered by a user of the interface on the multiple element blocks, the terminal device 110 obtains the selected target element block. In response to a drag operation triggered on the target element block, the target element block is moved based on the drag operation trajectory. When the draggable distance between the latest position of the target element block and the edge of the visible area reaches a first distance threshold, the interface is scrolled based on the movement direction of the target element block, displaying a portion of the invisible area of ​​the interface that corresponds to the movement distance of the target element block. Finally, in response to a release operation triggered on the target element block, the target element block is inserted based on the position of the release operation.

[0067] Server 120 can store configuration information of the user of the interface, and in response to the user opening the interface, send the historical partitioning results and historical sorting results stored when the interface was last closed to terminal device 110. It can also, in response to the user closing the interface, store the current partitioning results and current sorting results of each element block included in the interface.

[0068] In this application embodiment, the terminal device 110 may be an electronic device with a screen, such as a smartphone, tablet computer, laptop computer, desktop computer, smartwatch, etc., but is not limited to this.

[0069] The server 120 in this application embodiment can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDN), and big data and artificial intelligence platforms. This application does not impose any restrictions on these services.

[0070] based on Figure 1 For the scene shown, see Figure 2 This is an exemplary flowchart of a method for dragging and arranging element blocks according to an embodiment of this application. This process can be applied to... Figure 1 The terminal device 110 shown includes:

[0071] Step 201: Present the visible area of ​​the mini-program's operation interface.

[0072] The visible area includes multiple element blocks. These element blocks in the user interface can represent the functions or services that the mini-program can perform; alternatively, if the mini-program is a shopping mini-program, the element blocks can also represent the corresponding products.

[0073] For example, if the mini-program is a government mini-program, the interface may include elements for querying electronic certificates, elements for querying degree certificates, elements for querying 5A-level scenic spots, elements for querying customs services, and so on.

[0074] In one possible implementation, the user interface may include at least one partition. Partitions can be used to distinguish the block categories of element blocks; that is, element blocks belonging to the same partition have the same block category. The category names corresponding to different block categories can be represented by the partition names; for example, partition A corresponds to block category A.

[0075] In one example, the user interface can be a functional interface used to personalize the homepage of a mini-program. That is, in this user interface, users of the mini-program can select the element blocks corresponding to frequently used functions from among the multiple functions included in the mini-program to display on the mini-program's homepage.

[0076] In this scenario, the user interface can include two sections: a placement area and a waiting area. The placement area is used to arrange the selected element blocks displayed on the mini-program's homepage; the corresponding block category is the placement area element block. The waiting area is used to arrange all selectable element blocks; the block category corresponding to the selectable element blocks other than those in the placement area is the waiting area element block.

[0077] See Figure 3 This is a schematic diagram of the partitions of the user interface provided in an embodiment of this application. For example... Figure 3 As shown, the partition corresponding to "Added Applications" is the placement area, and the partition corresponding to "All Applications" is the pending placement area. The placement area can include selected element blocks AG, the visible area can display element blocks AO from all applications, and other element blocks from all applications can be displayed in the visible area after scrolling the interface. Element block AG corresponds to the placement area element block category, and element block HO corresponds to the pending placement area element block category. The terminal device can change the display icon of the corresponding element block after changing its block category from pending placement area element block to placement area element block, for example, by removing the plus sign in the upper right corner of the icon. This allows users of the interface to determine whether an element block has been added to "Added Applications" by checking if its icon has a plus sign.

[0078] Based on this, when presenting the visible area of ​​the operation interface, the historical partitioning results and historical arrangement results stored when the operation interface was last closed can be obtained. The historical partitioning results include the partitions of each element block when the operation interface was last closed, and the historical arrangement results include the arrangement order of the element blocks in their respective partitions when the operation interface was last closed. Based on the partition of each element block and its arrangement order in the corresponding partition, the initial position of each element block on the operation interface is determined, and the corresponding element blocks are arranged according to their initial positions on the operation interface. Based on the initial position of the visible area on the operation interface, the element blocks included in the visible area are determined, and the corresponding element blocks are presented in the visible area.

[0079] Specifically, in response to the opening of the user interface, the terminal device can obtain the block category of each element block stored in the server when the user interface was last closed. For each element block, the partition to which the element block belongs can be determined based on the block category of the element block.

[0080] Based on the above example, the preset variables of the operation interface may include: defaultOptionts, which is of type array and has the data structure: [selectedOptions, unselectedOptions].

[0081] Here, selectedOptions represents a set of element blocks for placement, and the data type is an array. The array can contain multiple data, each representing an element block for placement. unselectedOptions represents a set of element blocks to be placed, and the data type is also an array. Each data in the array represents an element block to be placed.

[0082] Taking `selectedOptions` as an example, `defaultOptionts.selectedOptions` represents the `selectedOptions` array within the `defaultOptionts` array. Further, `defaultOptionts.selectedOptions.item` represents a specific placement area element block within the `selectedOptions` array, and its data type can be an object. This variable can include a set of parameters related to the placement area element block. The block category can be determined based on the `type` field in this variable. That is, if the `type` field is `selected`, it can be determined that the element block's category is a placement area element block, and its partition is a placement area.

[0083] In addition, this variable may also include the element block's unique identifier (defaultOptionts.selectedOptions.item.id), icon (defaultOptions.selectedOptions.item.src), element label (defaultOptions.selectedOptions.item.label), and container (defaultOptions.selectedOptions.item.pid), etc. All of the above parameters are of string data type.

[0084] The `unselectedOptions` array contains the same variables and parameters as the `selectedOptions` array mentioned above. When determining the block type, the category (type) resource in the `defaultOptionts.unselectedOptions.item` variable can be used for this determination. That is, if the `type` field is `unselected`, it can be determined that the element block's block type is a pending area element block, and its partition is a pending area. Other variables and parameters in the `unselectedOptions` array can be found in the above description of the `selectedOptions` array, and will not be repeated here.

[0085] In one possible implementation, the terminal device can respond to the opening of the interface by retrieving variables stored in the server that set the arrangement rules of element blocks on the interface when it was last closed, so that the element blocks on the interface can be arranged according to the retrieved variables. These variables include, for example, the number of element blocks per row (columns), the width of a single element block (previewSize), the height of a single element block (itemHeight), and the reference length of the visible area in the scrollable direction of the interface (scrollHeight for vertical scrolling and scrollWidth for horizontal scrolling). The units for the width and height of a single element block are rpx. These variables can be configured according to actual conditions. For example, the width of a single element block can be set to 750 / columns; when the number of element blocks per row is 5, the width of a single element block can be 750 / 5 = 150. The height of a single element block can be set to the same as the width, or it can be set to other values, such as 140; this application does not limit this.

[0086] In some embodiments, the historical arrangement result can be the arrangement number of each element block when the operation interface was last closed. The arrangement number can be determined according to the variables representing the arrangement rules of the operation interface as described above, following a left-to-right and top-to-bottom order. For example, if five element blocks can be placed in a row, the arrangement number of the first element block from the left in the first row can be 1, the arrangement number of the second element block from the left in the first row can be 2, the arrangement number of the first element block from the left in the second row can be 6, and so on.

[0087] Optionally, the arrangement numbers of different partitions can be arranged independently; that is, the arrangement number of the first element block in both the placement area and the waiting area can be 1. Alternatively, the arrangement numbers of different partitions can be determined by a common arrangement. That is, assuming the placement area includes two rows of element blocks, and each row can hold five element blocks, the arrangement number of the first element block in the waiting area can be 11.

[0088] In one possible implementation, the placement area can also include multiple containers, with different containers used to distinguish the business category to which the function represented by the element block belongs. For example, the certificate query function in a government affairs mini-program could be located in the "education services" container, while the electronic business license function could be located in the "market supervision" container.

[0089] See Figure 4 This is a schematic diagram of a container provided in an embodiment of this application. Figure 4 As shown, the entire application displays four business categories: Business 1, Business 2, Business 3, and Business 4. One container can be displayed at a time in the visible area; the currently displayed container is Business 1, and Business 1 can include element blocks A1-A15. Clicking on a container name toggles the displayed containers in the visible area, for example... Figure 4 As shown, in response to a click operation on business 2, the element blocks included in business 2 can be displayed: B1-B15.

[0090] When the placement area includes multiple containers, upon opening the interface, variables representing relevant information about the containers, known as "tabs," can be retrieved. The interface display area is then presented based on this container information. The data type of "tabs" is an array, and the information for each container can include a unique identifier (id) and the container name (name), among other things.

[0091] Optionally, the opening operation of the user interface can be triggered by the user entering the mini-program and clicking a button representing the user interface. This button can be a text button, such as a "Customize" button, or an icon button; this application does not limit the specific type of button.

[0092] See Figure 5 A schematic diagram of buttons for the characterization operation interface provided in the embodiments of this application. Figure 5 The diagram shows the main interface of a mini-program. Users can access the interface by clicking the "Customize" button. Figure 3 As shown in the operation interface, after completing the drag-and-drop arrangement of element blocks in the operation interface, the element blocks of the "Added Applications" section can be displayed at the top of the main interface of the mini program.

[0093] Step 202: In response to a selection operation triggered for multiple element blocks, obtain the selected target element block.

[0094] The selection operation triggered by multiple element blocks can be a long press operation on the target element block among multiple element blocks. That is, the user of the operation interface can select the target element block to be dragged and arranged by long pressing on a certain element block.

[0095] Optionally, when the target element block is selected, vibration feedback can be used to notify the user of the interface that the target element block has been selected.

[0096] Based on the above solution, providing instant feedback to the user of the mini-program through micro-vibration at the start of the drag-and-drop operation can enhance the intuitiveness of the interaction and optimize the user experience.

[0097] In some embodiments, after obtaining the selected target element block, the terminal device may also change the value of the drag identifier (isDragging) used to determine whether the drag operation has ended to true, in order to indicate that the drag operation has started.

[0098] Step 203: In response to a drag operation triggered on the target element block, move the target element block based on the drag operation trajectory.

[0099] In one possible implementation, during the movement of the target element block, the latest position of the target element block is periodically obtained. Based on the latest position of the target element block and a preset swapping rule, the latest positions of multiple element blocks are determined. Then, based on the latest positions of the multiple element blocks, the visible area of ​​the operation interface is updated.

[0100] Specifically, when periodically obtaining the latest position of the target element block, it can be achieved by adding a throttling timer. When the throttling flag of the throttling timer is true, it means that the throttling timer is running. After a certain period of time, the throttling flag of the timer will be reset to false, indicating that the throttling timer has stopped running.

[0101] In this embodiment, the latest position of the target element block can be obtained when the throttling flag is false, and the throttling flag of the throttling timer can be set to true after obtaining the latest position of the target element block. The throttling timer setting time can be set based on experience or actual conditions, for example, it can be 100ms; this application does not limit this setting.

[0102] In some embodiments, when a terminal device determines the latest position of multiple element blocks based on the latest position of the target element block and a preset transposition rule, it can first determine the target index position based on the latest coordinates, sequence number, and block category of the target element block. The target index position is the position that the target element block should move to when the drag operation ends, as determined by the current drag operation.

[0103] For example, each element block in the user interface has an arrangement position, such that when the number of element blocks in the user interface is the same, even if the arrangement order of the element blocks changes, the coordinates of element blocks with the same arrangement number will be the same. The arrangement position can be determined based on the reference length, the number of element blocks in a single row, and the width and height of the element blocks. The calculation method for the arrangement position of each element block can be found in related technologies and will not be elaborated here.

[0104] The terminal device can first use the arrangement number of the most recently arranged element block as the arrangement number of the target index position, where the most recently arranged position is the arrangement position closest to the latest position of the element block. Based on this, the preset arrangement rule can be: if the original arrangement number of the target index position is greater than the arrangement number of the target element block, then the element block at the target index position, and all element blocks whose arrangement numbers follow the target index position, can be shifted forward one position in sequence, reserving the most recently arranged position for the target element block. If the arrangement number of the target index position is less than the original arrangement number of the target element block, then the element block at the target index position, and all element blocks whose arrangement numbers are between the target index position and the original arrangement number of the target element block, can be shifted backward one position in sequence.

[0105] Based on the above solution, since the position of the element block changes every frame when it moves in the interface, updating the position every frame would consume a lot of memory and cause lag. To avoid lag or skipping during dragging, this embodiment periodically obtains the latest position of the target element block. This allows the position to be obtained only once within a certain time period, thereby reducing memory consumption, preventing repeated triggering, and optimizing the user experience.

[0106] In some embodiments, if the draggable distance between the latest position of the target element block and the edge position of the visible area does not reach the first distance threshold until the user object of the operation interface performs the release operation, then there is no need to scroll the operation interface and step 205 can be executed directly.

[0107] See Figure 6 This is a schematic diagram of the user interface during drag-and-drop operations provided in an embodiment of this application. Figure 6 As shown, suppose we need to move element block O to the first row of the "All Applications" partition. Since the initial position of element block O and the position to be moved to are both within the visible area, there is no need to scroll the interface. If the object being used in the interface has been released, we can directly execute step 205.

[0108] Step 204: When the draggable distance between the latest position of the target element block and the edge position of the visible area reaches the first distance threshold, based on the movement direction of the target element block, scroll the operation interface and display the part of the invisible area of ​​the operation interface that matches the movement distance of the target element block.

[0109] The edge of the visible area can be the edge of the target element block in the direction of movement. For example, if the target element block moves to the left, the edge of the visible area will be the left edge of the visible area.

[0110] In one possible implementation, the first distance threshold can be determined by the following method:

[0111] The number of reference pixels in the visible area along the scrollable direction of the interface is obtained. Based on the number of reference pixels and the movement speed of the target element block, a first distance threshold is determined. The scrollable direction is the horizontal and / or vertical direction; the first distance threshold is positively correlated with the movement speed.

[0112] For example, consider a shopping mini-program. Users can add items to their cart or change their display position within the mini-program by dragging and dropping them. As the dragged item moves, the device dynamically calculates a first distance threshold based on the item's current position, speed, and direction of movement. If the dragged item is moving downwards at a fast speed, it can be determined that the user likely wants to move it towards the bottom of the interface. In this case, the first distance threshold can be set higher so that the interface can start scrolling earlier. If the dragged item is moving downwards at a slower speed, it can be determined that the item's current position is close to the user's desired location. In this case, the first distance threshold can be set lower so that the scroll bar only starts scrolling when the dragged item is near the bottom edge.

[0113] Based on the above scheme, since the first distance threshold is positively correlated with the movement speed, the scrolling time of the operation interface can be adaptively adjusted according to the drag operation of the user, which can improve the smoothness of the operation and enhance the user experience.

[0114] In some embodiments, to ensure the consistency and adaptability of the user interface across different terminal devices, obtaining the reference pixel count of the visible area in the scrollable direction of the user interface can be achieved through the following methods:

[0115] Obtain the reference length and logical pixel width of the visible area in the scrollable direction of the interface. Determine the device pixel ratio based on the logical pixel width and the screen pixel width. Determine the reference number of pixels in the scrollable direction of the interface based on the reference length and the device pixel ratio. The logical pixel width represents the pixel width determined relative to the screen of a fixed device.

[0116] The screen pixel width can be obtained from the system configuration information of the terminal device, for example, through systemInfo.screenWidth. The logical pixel width is usually 750, so the device pixel ratio can be 750 / systemInfo.screenWidth, and the calculated value should be rounded to four decimal places.

[0117] Optionally, the first distance threshold can also be preset by relevant staff based on experience or actual situation. When the first distance threshold is not configured, the first distance threshold can be determined according to the above method.

[0118] In another possible implementation, the condition for determining whether the interface is scrolling can be whether the vertical or horizontal distance from the current position of the target element block to the top edge reaches the maximum limit distance. The maximum limit distance can be determined based on the difference between a reference length in the scrollable direction and the height of the top navigation bar. Specifically, when the scrollable direction is vertical, the top edge is the top edge of the interface, and the determination is based on whether the vertical distance reaches the maximum limit distance; when the scrollable direction is horizontal, the top edge is the left edge, and the determination is based on whether the horizontal distance reaches the maximum limit distance.

[0119] For example, assuming a vertically scrollable navigation bar with a height of 70, the maximum limiting distance can be determined by first obtaining the terminal device's window height using `systemInfo.windowHeight`, then using `containerHeight = windowHeight - 70`. The product of the reference length and the device's pixel ratio is then used.

[0120] See Figure 7 This is a schematic diagram of the maximum limiting distance provided in the embodiments of this application. Determining whether to scroll the interface based on this maximum limiting distance can be considered as performing the interface scrolling operation when the target element block moves to the edge of the visible area.

[0121] In some embodiments, the user interface may include a scroll bar, the scroll bar being set in the same direction as the scrollable direction. If the scrollable direction is vertical, the scroll bar is set vertically. If the scrollable direction is horizontal, the scroll bar is set horizontally. If the scrollable direction includes both vertical and horizontal directions, a scroll bar can be provided in both the vertical and horizontal directions.

[0122] See Figure 8 This is another schematic diagram of the user interface during drag-and-drop operations provided in the embodiments of this application, as shown below. Figure 8 As shown, element block A3 is the target element block of the current drag operation. Assuming the current draggable distance reaches the first distance threshold, and element block A3 is moving upwards, the scroll bar can scroll upwards simultaneously, causing the interface to scroll downwards and display the invisible area above the visible area. Since this drag is a cross-partition drag, the corresponding element block in the area to be placed can have its upper right corner removed and be retained. Furthermore, if this drag is a drag operation within the same partition, the target element block at the initial position will not be retained. (See reference...) Figure 6 A schematic diagram of the user interface.

[0123] Optionally, the target index position of the target element block can be predicted by taking into account the current position of the scroll bar during the movement of the target element block.

[0124] In one example, suppose it's a shopping mini-program where users change the display position of items within the mini-program by dragging them. When an user starts dragging an item, the terminal device can predict where the user might drag the item on the interface by analyzing the item's movement speed and direction, as well as the current scroll bar position. For example, if the user drags the item quickly downwards, causing it to move rapidly, the terminal device might predict that the user wants to drag the item to the bottom of the interface. If the scroll bar is currently at the top of the interface, the terminal device might predict that the user wants to drag the item to the middle or bottom of the interface. If the scroll bar is currently in the middle of the interface, the terminal device might predict that the user wants to drag the item to the bottom of the interface.

[0125] In one possible implementation, when scrolling the interface based on the movement direction of the target element block, the scrolling speed of the interface can be adjusted based on the draggable distance between the latest position of the target element block and the edge position of the visible area. The interface is scrolled based on both the movement direction of the target element block and the scrolling speed. The scrolling speed is negatively correlated with the draggable distance.

[0126] For example, when a user of a mini-program drags a target element block to the bottom edge, the smaller the drag distance, the more likely the target element block's index position is to be located towards the bottom of the interface. Therefore, the interface can be scrolled more quickly to reach the target index position faster.

[0127] Based on the above solution, since the interface scrolling speed can be adjusted according to the draggable distance, it can better meet the operational needs of users, thereby improving their user experience. Furthermore, since users can adjust the dragging path based on the target element's index position to increase the interface scrolling speed, it can also improve operational efficiency.

[0128] Step 205: In response to a release operation triggered on the target element block, insert the target element block based on the position of the release operation.

[0129] In one possible implementation, in response to a release operation triggered on the target element block, a release distance between the operation position and the initial position of the target element block is obtained, where the initial position is the position of the target element block when the visible area of ​​the operation interface is displayed. If the release distance is greater than a second distance threshold, the target element block is inserted into the empty space closest to the operation position; if the release distance is not greater than the second distance threshold, the target element block is returned to its initial position.

[0130] Optionally, the second distance threshold can be set according to the width and height of the element block, for example, the second distance threshold can satisfy formula (1).

[0131]

[0132] In the formula, d is the second distance threshold, h represents the height of the target element block, and w represents the width of the target element block.

[0133] Optionally, you can also determine whether to return the target element block to its initial position by setting operation boundaries. See also Figure 9 This is a schematic diagram of the operational boundaries provided for embodiments of this application. Figure 9As shown, the solid line represents the initial position of the target element block, and the dashed line can represent the operation boundary. For example, the operation boundary can be formed by adding half the height and half the width of the element block to its height and width, respectively; that is, in terms of height, it exceeds h / 4 vertically, and in terms of width, it exceeds w / 4 horizontally. When the release operation position is within the operation boundary, the target element block can be returned to its initial position; when the release operation position is outside the operation boundary, the target element block is inserted into the nearest empty space.

[0134] In addition, the second distance threshold or operating boundary can also be set by relevant personnel based on experience or actual situation. When the second distance threshold or operating boundary is not configured, the second distance threshold or operating boundary can be determined according to the above method.

[0135] See Figure 10 This is a schematic diagram of the operation interface during the release operation provided in an embodiment of this application. Figure 10 As shown, the target element block for the current drag operation is element block A18. Drag element block A18 to... Figure 10 When shown in the image, the empty space indicated by the arrow is the insertion position for element block A18. This empty space is where element block A18 will be dragged. Figure 10 The position shown is obtained by moving element block C5 and element block C2 one position to the right in turn.

[0136] In some embodiments, after inserting the target element block, the terminal device may also change the value of the drag identifier (isDragging) used to determine whether the drag operation has ended to false, in order to indicate that the drag operation has ended.

[0137] In some embodiments, step 202 may further obtain the block category of the target element block, and the movable range when moving the target element block can be determined based on the block category. For example, if the block category of the target element block is a placement area element block, the movable range of the target element block can be restricted to the placement area. If the block category of the target element block is a place-to-be-placed element block, the movable range of the target element block can be restricted to both the place-to-be-placed area and the placement area.

[0138] Optionally, the placement area in the operation interface may also include element blocks whose block type is placement area element block. In this case, the movable range of the placement area element block in the placement area is the placement area.

[0139] Furthermore, if the release operation is performed outside the movable range of the target element block, a message indicating that the target element block cannot be dragged to the specified location will appear. For example, if the target element block is a placement area element block and the release operation is performed in the placement area, a message "Unable to move to current position" will appear.

[0140] In some embodiments, based on the operation position of the release operation, after inserting the target element block, the terminal device can send the current partitioning result and the current arrangement result of each element block in the current operation interface to the server to update the partitioning result and arrangement result stored in the server.

[0141] See Figure 11 This is a schematic diagram of the data processing flow for the drag-and-drop arrangement method of element blocks provided in the embodiments of this application.

[0142] Step 1101: Enter the mini program.

[0143] In response to the action of opening the mini program using an object, enter the main interface of the mini program.

[0144] Step 1102: Open the operation interface.

[0145] In response to a user clicking a button on the main interface of the mini-program that represents the operation interface, open the operation interface for customizing the arrangement of element blocks.

[0146] Step 1103: Obtain historical partition results and historical sorting results.

[0147] Request the corresponding API from the server to obtain the initial data for the operation interface, namely the historical partition results and historical sorting results.

[0148] Step 1104: Query the historical data of the object being used.

[0149] The historical partitioning and sorting results of the user interface are obtained by querying the historical data of the objects used in the database.

[0150] Step 1105: Return the historical data of the object being used.

[0151] Return historical data of the object used to the server.

[0152] Step 1106: Return the historical partition results and historical sort results.

[0153] After retrieving the historical data of the objects used from the database, the data structure can be processed to obtain historical partitioning and historical sorting results that can be parsed by the terminal device, and then sent to the terminal device.

[0154] Step 1107: Present the operation interface.

[0155] Based on the acquired historical partitioning and sorting results, the terminal device renders the user interface and presents the visible area of ​​the user interface according to the screen size of the terminal device.

[0156] Step 1108: Drag and drop to arrange.

[0157] In response to drag-and-drop operations on any element block using an object, determine the partition to which each element block belongs and its arrangement order.

[0158] Step 1109: Update the user interface.

[0159] Each drag-and-drop arrangement operation can calculate the current position of each element block and update the operation interface based on the current position of the element block.

[0160] Step 1110: Store the current partition result and the current sort result.

[0161] In response to a click on the "Confirm" button in the interface, confirm the completion of the drag-and-drop operation and send the current partition and sorting results to the server.

[0162] Step 1111: Update the historical data of the object being used.

[0163] The server then sends the data, including the current partitioning result and the current sorting result, to the database to update the historical data of the objects being used.

[0164] See Figure 12 This is an exemplary flowchart of the drag-and-drop arrangement operation provided in an embodiment of this application. Figure 11 Step 1108 can be followed Figure 12 The process shown includes:

[0165] Step 1201: Select the target element block.

[0166] In response to a long press on the target element block, select the target element block.

[0167] Step 1202: Can the target element block be dragged?

[0168] In practical applications, you can set whether each element block in the operation interface can be dragged according to the actual situation. If the target element block can be dragged, proceed to step 1203; if the target element block cannot be dragged, proceed to step 1204.

[0169] Step 1203: Is the operation interface outside the visible area?

[0170] Determine whether the user interface includes both visible and invisible areas. If the user interface includes invisible areas, it can be determined that the user interface exceeds the visible area. If the user interface only includes the visible area, it can be determined that the user interface does not exceed the visible area.

[0171] If the operation interface is outside the visible area, proceed to step 1205; if the operation interface is within the visible area, skip step 1205 and proceed directly to step 1206.

[0172] Step 1204: A prompt message pops up.

[0173] A pop-up message indicates that the currently selected target element block cannot be dragged.

[0174] Step 1205: Calculate the scroll bar length.

[0175] The scroll bar length can be calculated based on the length of the visible area in the scrollable direction and the length of the interface in the scrollable direction.

[0176] Step 1206: Obtain relevant information about the target element block.

[0177] It can obtain information such as the coordinates, unique identifier, and block category of the target element block.

[0178] Step 1207: Is it an element block to be placed?

[0179] Based on the block type obtained in step 1206, determine whether the target element block is a block of the area to be placed. If the target element block is a block of the area to be placed, proceed to step 1208; if the target element block is not a block of the area to be placed, proceed to step 1209.

[0180] Step 1208: Calculate the movable range.

[0181] The movable range of the element block in the placement area is called the placement area.

[0182] Step 1209: Calculate the first distance threshold.

[0183] The first distance threshold is calculated based on the target element block's movement speed, scroll bar length, and the terminal device's screen information.

[0184] Step 1210: Calculate the sequence number of each element block based on the current position.

[0185] The sequence number of each element block can be calculated based on its current position.

[0186] Step 1211: Perform transposition calculation.

[0187] As the target element block moves, a transposition calculation is performed according to the preset transposition rules to determine the current arrangement number of each element block.

[0188] Step 1212: Rearrange the element blocks according to the current arrangement number.

[0189] Based on the calculated current arrangement number of each element block, the element blocks are rearranged in the operation interface, thereby updating the operation interface.

[0190] It should be noted that, Figure 12 and Figure 11 For detailed implementation methods of each step, please refer to [link / reference]. Figure 2 The relevant descriptions in the method embodiments shown will not be repeated here.

[0191] Based on the same inventive concept as the above-described method embodiments, this application also provides a device for dragging and arranging element blocks. For example... Figure 13 The drag-and-drop arrangement device 1300 for the element blocks shown may include:

[0192] Display unit 1301 is used to present the visible area of ​​the operation interface of the mini-program; the visible area includes multiple element blocks;

[0193] The drag-and-drop unit 1302 is configured to: obtain a selected target element block in response to a selection operation triggered on the plurality of element blocks; move the target element block based on the operation trajectory of the drag operation in response to a drag operation triggered on the target element block; when the draggable distance between the latest position of the target element block and the edge position of the visible area reaches a first distance threshold, scroll the operation interface based on the movement direction of the target element block to display a portion of the invisible area of ​​the operation interface that matches the movement distance of the target element block; and insert the target element block based on the operation position of the release operation in response to a release operation triggered on the target element block.

[0194] In one possible implementation, the operation interface includes at least one partition; when the display unit 1301 presents the visible area of ​​the operation interface, the acquisition unit 1303 is used to: acquire the historical partition results and historical arrangement results stored when the operation interface was last closed; the historical partition results include: the partitions of each of the plurality of element blocks, and the historical arrangement results include: the arrangement order of the plurality of element blocks in their respective corresponding partitions;

[0195] The display unit 1301 is used to determine the initial position of each element block on the operation interface based on the partition of each element block and the arrangement order in the corresponding partition, and to arrange the corresponding element blocks in the operation interface according to the initial position of each element block; and to determine the element blocks included in the visible area based on the initial position of the visible area on the operation interface, and to present the corresponding element blocks in the visible area.

[0196] In one possible implementation, after the drag unit 1302 moves the target element block based on the operation trajectory of the drag operation, the acquisition unit 1303 is further configured to: periodically acquire the latest position of the target element block during the movement of the target element block; the drag unit 1302 is configured to determine the latest position of each of the plurality of element blocks based on the latest position of the target element block and a preset transposition rule; and update the visible area of ​​the operation interface based on the latest position of each of the plurality of element blocks.

[0197] In one possible implementation, the first distance threshold is determined by the following method: the acquisition unit 1303 acquires the number of reference pixels of the visible area in the scrollable direction of the operation interface; the scrollable direction is a horizontal or vertical direction; the dragging unit 1302 determines the first distance threshold based on the number of reference pixels and the moving speed of the target element block; the first distance threshold is positively correlated with the moving speed.

[0198] In one possible implementation, when the acquisition unit 1303 acquires the reference number of pixels of the visible area in the scrollable direction of the operation interface, it is specifically used to: acquire the reference length and logical pixel width of the visible area in the scrollable direction of the operation interface; determine the device pixel ratio based on the logical pixel width and the screen pixel width; the logical pixel width represents the pixel width determined based on the screen of a fixed device; and determine the reference number of pixels in the scrollable direction of the operation interface based on the reference length and the device pixel ratio.

[0199] In one possible implementation, when the dragging unit 1302 scrolls the operation interface based on the movement direction of the target element block, it is specifically used to: adjust the interface scrolling speed of the operation interface based on the draggable distance between the latest position of the target element block and the edge position of the visible area; the interface scrolling speed is negatively correlated with the draggable distance; and scroll the operation interface based on the movement direction of the target element block and the interface scrolling speed.

[0200] In one possible implementation, the drag unit 1302, in response to a release operation triggered on the target element block, inserts the target element block based on the operation position of the release operation, specifically by: obtaining a release distance between the operation position and the initial position of the target element block in response to a release operation triggered on the target element block; the initial position being the position of the target element block when the visible area of ​​the operation interface is displayed; inserting the target element block into the empty space closest to the operation position when the release distance is greater than a second distance threshold; and returning the target element block to its initial position when the release distance is not greater than the second distance threshold.

[0201] For ease of description, the above sections are divided into modules (or units) according to their functions and described separately. In the embodiments of this application, the terms "module" or "unit" refer to a computer program or part of a computer program with a predetermined function, which works with other related parts to achieve a predetermined goal, and can be implemented wholly or partially using software, hardware (such as processing circuitry or memory), or a combination thereof. Similarly, a processor (or multiple processors or memory) can be used to implement one or more modules or units. Furthermore, each module or unit can be part of an overall module or unit that includes the functions of that module or unit.

[0202] Having described the drag-and-drop arrangement method and apparatus for element blocks according to exemplary embodiments of this application, we will now describe a computer device according to another exemplary embodiment of this application.

[0203] Those skilled in the art will understand that various aspects of this application can be implemented as a system, method, or program product. Therefore, various aspects of this application can be specifically implemented in the following forms: a completely hardware implementation, a completely software implementation (including firmware, microcode, etc.), or a combination of hardware and software implementations, collectively referred to herein as a "circuit," "module," or "system."

[0204] Based on the same inventive concept as the above-described method embodiments, this application also provides a computer device. In one embodiment, the computer device may be a server, such as... Figure 1 The server 1400 is shown. In this embodiment, the computer device is structured as follows: Figure 14 As shown, it may include at least a memory 1401, a communication module 1403, and at least one processor 1402.

[0205] The memory 1401 is used to store computer programs executed by the processor 1402. The memory 1401 may mainly include a program storage area and a data storage area. The program storage area may store the operating system and programs required to run instant messaging functions, etc.; the data storage area may store various instant messaging information and operation instruction sets, etc.

[0206] Memory 1401 may be volatile memory, such as random-access memory (RAM); memory 1401 may also be non-volatile memory, such as read-only memory, flash memory, hard disk drive (HDD), or solid-state drive (SSD); or memory 1401 may be any other medium capable of carrying or storing a desired computer program having the form of instructions or data structures and accessible by a computer, but is not limited thereto. Memory 1401 may be a combination of the above-described memories.

[0207] Processor 1402 may include one or more central processing units (CPUs) or digital processing units, etc. Processor 1402 is used to implement the drag-and-drop arrangement method of the aforementioned element blocks when calling the computer program stored in memory 1401.

[0208] The communication module 1403 is used to communicate with terminal devices and other servers.

[0209] This application embodiment does not limit the specific connection medium between the memory 1401, communication module 1403, and processor 1402. This application embodiment... Figure 14 The memory 1401 and the processor 1402 are connected via a bus 1404, and the bus 1404 is in Figure 14 The diagram uses thick lines to describe the connections between other components; these are for illustrative purposes only and should not be considered limiting. The 1404 bus can be divided into address bus, data bus, control bus, etc. For ease of description, Figure 14 It is described using only a thick line, but does not indicate that there is only one bus or one type of bus.

[0210] The memory 1401 stores a computer storage medium, which stores computer-executable instructions for implementing the drag-and-drop arrangement method of element blocks according to embodiments of this application. The processor 1402 is used to execute the aforementioned drag-and-drop arrangement method of element blocks, such as... Figure 2 As shown.

[0211] In another embodiment, the computer device can also be other computer devices, such as... Figure 1 The terminal device 110 is shown. In this embodiment, the structure of the computer device can be as follows: Figure 15 As shown, it includes components such as: communication component 1510, memory 1520, display unit 1530, camera 1540, sensor 1550, audio circuit 1560, Bluetooth module 1570, processor 1580, etc.

[0212] The communication component 1510 is used to communicate with the server. In some embodiments, it may include a Wireless Fidelity (WiFi) module, which is a short-range wireless transmission technology, and the electronic device can send and receive information through the WiFi module.

[0213] The memory 1520 can be used to store software programs and data. The processor 1580 executes various functions of the terminal device 110 and performs data processing by running the software programs or data stored in the memory 1520. The memory 1520 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device. The memory 1520 stores an operating system that enables the terminal device 110 to run. In this application, the memory 1520 may store the operating system and various applications, and may also store a computer program that executes the drag-and-drop arrangement method of element blocks according to the embodiments of this application.

[0214] The display unit 1530 can also be used to display information input by an object or information provided to an object, as well as a graphical user interface (GUI) of various menus of the terminal device 110. Specifically, the display unit 1530 may include a display screen 1532 disposed on the front of the terminal device 110. The display screen 1532 may be configured as a liquid crystal display, a light-emitting diode, or the like. The display unit 1530 can be used to display the operation interface, the main interface of a mini-program, etc., in the embodiments of this application.

[0215] The display unit 1530 can also be used to receive input digital or character information and generate signal inputs related to object settings and function control of the terminal device 110. Specifically, the display unit 1530 may include a touch screen 1531 disposed on the front of the terminal device 110, which can collect touch operations on or near the object, such as clicking a button, dragging a scroll bar, etc.

[0216] The touchscreen 1531 can be placed on top of the display screen 1532, or the touchscreen 1531 and the display screen 1532 can be integrated to realize the input and output functions of the terminal device 110. After integration, it can be referred to as a touch display screen. In this application, the display unit 1530 can display the application and the corresponding operation steps.

[0217] Camera 1540 can be used to capture still images, and objects can publish images captured by camera 1540 through an application. There can be one or multiple cameras 1540. An optical image of an object is generated through a lens and projected onto a photosensitive element. The photosensitive element can be a charge-coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the light signal into an electrical signal, which is then transmitted to processor 1580 to be converted into a digital image signal.

[0218] The terminal device may also include at least one sensor 1550, such as an accelerometer 1551, a proximity sensor 1552, a fingerprint sensor 1553, and a temperature sensor 1554. The terminal device may also be equipped with other sensors such as a gyroscope, barometer, hygrometer, thermometer, infrared sensor, light sensor, and motion sensor.

[0219] Audio circuitry 1560, speaker 1561, and microphone 1562 provide an audio interface between the device and terminal device 110. Audio circuitry 1560 converts received audio data into electrical signals, which are then transmitted to speaker 1561, where they are converted into sound signals for output. Terminal device 210 may also be equipped with volume buttons for adjusting the volume of the sound signal. On the other hand, microphone 1562 converts collected sound signals into electrical signals, which are then received by audio circuitry 1560, converted into audio data, and output to communication component 1510 for transmission to, for example, another terminal device 210, or to memory 1520 for further processing.

[0220] The Bluetooth module 1570 is used to interact with other Bluetooth devices that also have a Bluetooth module via the Bluetooth protocol. For example, a terminal device can establish a Bluetooth connection with a wearable electronic device (such as a smartwatch) that also has a Bluetooth module through the Bluetooth module 1570, thereby exchanging data.

[0221] The processor 1580 is the control center of the terminal device, connecting various parts of the terminal through various interfaces and lines. It executes various functions and processes data by running or executing software programs stored in the memory 1520 and calling data stored in the memory 1520. In some embodiments, the processor 1580 may include one or more processing units; the processor 1580 may also integrate an application processor and a baseband processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the baseband processor mainly handles wireless communication. It is understood that the baseband processor may not be integrated into the processor 1580. In this application, the processor 1580 can run the operating system, applications, user interface display and touch response, and the drag-and-drop arrangement method of element blocks in the embodiments of this application. Furthermore, the processor 1580 is coupled to the display unit 1530.

[0222] Furthermore, it should be noted that in the specific embodiments of this application, object data related to the dragging and arranging of element blocks is involved. When the above embodiments of this application are applied to specific products or technologies, permission or consent from the object is required, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

[0223] In some possible implementations, various aspects of the drag-and-drop arrangement method for element blocks provided in this application can also be implemented as a program product, which includes a computer program. When the program product is run on a computer device, the computer program causes the computer device to perform the steps in the drag-and-drop arrangement method for element blocks according to various exemplary embodiments of this application described above. For example, the computer device can perform actions such as... Figure 2 The steps are shown in the figure.

[0224] The program product may employ any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples (a non-exhaustive list) of readable storage media include: electrical connections having one or more wires, portable disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0225] The program product of the embodiments of this application may employ a portable compact disc read-only memory (CD-ROM) and include a computer program, and may run on an electronic device. However, the program product of this application is not limited thereto. In this document, the readable storage medium may be any tangible medium that contains or stores a program that may be used by or in conjunction with a command execution system, apparatus, or device.

[0226] A readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying a readable computer program. This propagated data signal may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A readable signal medium may also be any readable medium other than a readable storage medium, capable of sending, propagating, or transmitting a program for use by or in conjunction with a command execution system, apparatus, or device.

[0227] Computer programs contained on readable media may be transmitted using any suitable medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination thereof.

[0228] Computer programs for performing the operations of this application can be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java and C++, and conventional procedural programming languages ​​such as C or similar languages. The computer program can execute entirely on the user's computer device, partially on the user's computer device, as a standalone software package, partially on the user's computer device and partially on a remote computer device, or entirely on a remote computer device. In cases involving remote computer devices, the remote computer device can be connected to the user's computer device via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computer device (e.g., via the Internet using an Internet service provider).

[0229] It should be noted that although several units or sub-units of the device have been mentioned in the detailed description above, this division is merely exemplary and not mandatory. In fact, according to embodiments of this application, the features and functions of two or more units described above can be embodied in one unit. Conversely, the features and functions of one unit described above can be further divided and embodied by multiple units.

[0230] Furthermore, although the operations of the method of this application are described in a specific order in the accompanying drawings, this does not require or imply that these operations must be performed in that specific order, or that all the operations shown must be performed to achieve the desired result. Additionally or alternatively, certain steps may be omitted, multiple steps may be combined into one step, and / or one step may be broken down into multiple steps.

[0231] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing a computer-usable computer program.

[0232] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, produce a machine for implementing the flowchart illustrations. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0233] These computer program commands may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the commands stored in the computer-readable storage medium produce an article of manufacture including command means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0234] These computer program commands can also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing the commands executed on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0235] Although preferred embodiments of this application have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of this application.

[0236] Obviously, those skilled in the art can make various modifications and variations to this application without departing from the spirit and scope of this application. Therefore, if such modifications and variations fall within the scope of the claims of this application and their equivalents, this application also intends to include such modifications and variations.

Claims

1. A method for dragging and arranging element blocks, characterized in that, include: The visible area that presents the operation interface of the mini-program; the visible area includes multiple element blocks; In response to a selection operation triggered for the plurality of element blocks, the selected target element block is obtained; In response to a drag operation triggered on the target element block, the target element block is moved based on the operation trajectory of the drag operation; When the draggable distance between the latest position of the target element block and the edge position of the visible area reaches a first distance threshold, the operation interface is scrolled based on the movement direction of the target element block, and the portion of the invisible area of ​​the operation interface that matches the movement distance of the target element block is displayed. In response to a release operation triggered for the target element block, the target element block is inserted based on the operation position of the release operation.

2. The method according to claim 1, characterized in that, The user interface includes at least one partition; the visible area displaying the user interface includes: Retrieve the historical partitioning results and historical arrangement results stored when the operation interface was last closed; the historical partitioning results include: the partitions of each of the multiple element blocks, and the historical arrangement results include: the arrangement order of the multiple element blocks in their respective partitions; Based on the partition of each element block and its arrangement order in the corresponding partition, the initial position of each element block in the operation interface is determined, and the corresponding element blocks are arranged in the operation interface according to their initial positions. Based on the initial position of the visible area on the operation interface, the element blocks included in the visible area are determined, and the corresponding element blocks are presented in the visible area.

3. The method according to claim 1, characterized in that, After moving the target element block based on the drag-and-drop operation trajectory, the method further includes: During the movement of the target element block, the latest position of the target element block is periodically acquired; Based on the latest position of the target element block and the preset transposition rules, determine the latest position of each of the multiple element blocks; The visible area of ​​the operation interface is updated based on the latest position of each of the multiple element blocks.

4. The method according to claim 1, characterized in that, The first distance threshold is determined according to the following method: Obtain the reference number of pixels of the visible area in the scrollable direction of the operation interface; the scrollable direction is either horizontal or vertical. The first distance threshold is determined based on the number of reference pixels and the moving speed of the target element block; the first distance threshold is positively correlated with the moving speed.

5. The method according to claim 4, characterized in that, The step of obtaining the reference pixel count of the visible area in the scrollable direction of the operation interface includes: Obtain the reference length and logical pixel width of the visible area in the scrollable direction of the operation interface; The device pixel ratio is determined based on the logical pixel width and the screen pixel width; the logical pixel width represents the pixel width determined with the screen of a fixed device as a reference. Based on the reference length and the device pixel ratio, the number of reference pixels in the scrollable direction of the operation interface is determined.

6. The method according to any one of claims 1-5, characterized in that, The step of scrolling the operation interface based on the movement direction of the target element block includes: The scrolling speed of the interface is adjusted based on the draggable distance between the latest position of the target element block and the edge position of the visible area; the scrolling speed is negatively correlated with the draggable distance. The operation interface is scrolled based on the movement direction of the target element block and the interface scrolling speed.

7. The method according to any one of claims 1-5, characterized in that, The step of inserting the target element block in response to a release operation triggered against the target element block, based on the operation position of the release operation, includes: In response to a release operation triggered on the target element block, a release distance is obtained between the operation position and the initial position of the target element block; the initial position is the position of the target element block when the visible area of ​​the operation interface is displayed; When the release distance is greater than the second distance threshold, the target element block is inserted into the empty space closest to the operation position; When the release distance is not greater than the second distance threshold, the target element block is returned to its initial position.

8. A device for dragging and arranging element blocks, characterized in that, include: The display unit is used to present the visible area of ​​the mini-program's operation interface; the visible area includes multiple element blocks; A drag-and-drop unit is configured to: obtain a selected target element block in response to a selection operation triggered on the plurality of element blocks; move the target element block based on the operation trajectory of the drag operation in response to a drag operation triggered on the target element block; when the draggable distance between the latest position of the target element block and the edge position of the visible area reaches a first distance threshold, scroll the operation interface based on the movement direction of the target element block to display a portion of the invisible area of ​​the operation interface that matches the movement distance of the target element block; and insert the target element block based on the operation position of the release operation in response to a release operation triggered on the target element block.

9. A computer device, characterized in that, It includes a processor and a memory, wherein the memory stores program code that, when executed by the processor, causes the processor to perform the steps of the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, It includes program code that, when run on a computer device, causes the computer device to perform the steps of the method according to any one of claims 1 to 7.

11. A computer program product, characterized in that, It includes computer instructions that, when executed by a processor, implement the steps of the method according to any one of claims 1 to 7.

Images