List system supporting multi-stage multi-interaction scene

Abstract

The invention provides a list system supporting multi-stage and multi-interaction scenes. The system is used for processing a tree list composed of units and activities. The subordinate of the unit can be a unit or an activity; the activity does not include subordinate; the system comprises an interaction module used for receiving operation of a user on a page and forwarding the operation to a list view module; the list view module is used for processing the dragging or sideslip operation of the user on the total display list and the retrieval result list, and rendering page display; the agent module is used for processing business logic involved when the list view module operates the list; the multiplexing pool module is used for caching reusable units or activities in the page; and the retrieval module is used for retrieving the unit or the activity according to the query condition input by the user. The method has the advantages that user experience is improved, operations such as dragging, sideslip and searching of the list are integrated into one page, and a user can conveniently organize and edit units and activities.

Description

Technical Field

[0001] The invention belongs to the field of mobile device page processing, and in particular relates to a list system supporting multi-level and multi-interaction scenarios. Background Art

[0002] In the online learning management system, the class list aggregation page is one of the most important core functions. The class list aggregation page is defined as a collection of units and activities. Units are interpreted as thematic groupings in a class. Activities can include classes, homework, quizzes, discussions, recorded classes, materials, etc. Activities are the smallest units. Units can contain both units and activities.

[0003] Although the native list view of Android and iOS can realize list view reuse, it does not have the ability to fold, expand, drag and slide, so it is impossible to directly use the system's list view to realize complex interactions in multi-level and multi-interaction scenarios. Therefore, it is necessary to implement a set of Android, iOS and web terminals that have both the ability to reuse lists and the ability to drag cards up and down, slide cards sideways, and search for activities, so as to realize the combination of multi-level display and multi-interaction scenarios.

[0004] The native list views of Android and iOS have the following deficiencies in terms of dragging, sliding, and searching:

[0005] Drag function: At present, whether it is an app or a web page, the technology for dragging capabilities already exists, and the overall approach is based on the idea of ​​exchange. However, from a business perspective, dragging is performed differently on the teacher side and the student side, and the dragging effect on the teacher side needs to be completely customized. The existing dragging technology cannot meet the demands of business scenarios. The scenarios that cannot be met are as follows: 1. Fold all units when dragging a unit; 2. If the card colliding with the dragging activity is a scene where the unit is folded, no exchange operation is performed; 3. If the card colliding with the dragging activity is a scene where the unit is expanded, the exchange operation needs to be performed only when specific requirements are met; 4. To drag the activity to the target unit, the target unit needs to be selected for self-rendering; 5. The actual dragging cannot be linked to the sliding and scrolling effects as a whole in the scenario where the list is displayed on multiple screens.

[0006] Side-slide function: Currently, the technology for side-slide capability already exists, whether it is an app or a web page, but the application and business adaptability of side-slide in the learning management system cannot be guaranteed. For example, when deleting a unit, you need to delete the current side-slide card and the units or activities under the unit, and the number of units or activities under a unit is not fixed; when deleting, you also need to consider the business logic, for example, just delete the current unit and merge the content under the unit into other units. Therefore, the existing side-slide cannot meet the usage scenarios of the learning management system.

[0007] Search function: Currently, the search technology is relatively mature, whether it is an app or a web page. However, in a learning management system, search results are only displayed, and there is no ability to drag and delete search results in the list of data. Therefore, the adaptability of applications and businesses in the learning management system cannot be guaranteed.

[0008] In summary, the existing technical solutions have the following shortcomings in the practical application of learning management:

[0009] 1. Single function: The content currently displayed can only meet the reuse requirements, and does not have the ability to drag and slide, let alone achieve the perfect combination of dragging, sliding and searching on one page.

[0010] 2. Poor user experience: The dragging scenario requires a new page to pop up and cannot be completed in one list; some results are displayed in the search scenario, and the existing solution cannot support the dragging operation; the dragging scenario can only be exchanged, not folded; the dragging scenario cannot realize dragging activities to the folded target unit, and the previously selected unit must be canceled first, and then the folded target unit is selected; dragging activities to the expanded target unit requires the previously selected unit to be canceled first, and then the expanded target unit is selected; there is no animation effect when the activity is inserted into the expanded target unit; there is no animation effect when the activity is exchanged; there is no folding effect for the dragging unit; there is no special effect for selecting and inserting the dragging activity. If dragging, sliding, and searching are implemented in one list, the user operation will be smoother, and the experience of not being able to drag will reduce user stickiness.

[0011] 3. Low iteration efficiency and poor version compatibility: As the types of activities increase, the content needs to display more activities, but for unsupported types, the displayed content is biased. Each new activity needs to be filtered by the server. Each time a new scene is added, the relevant protocols need to be modified or added from the background service to the terminal, and the internal logic needs to be implemented separately, and finally the version needs to be released jointly. The overall iteration efficiency is very low. Summary of the invention

[0012] The purpose of the present invention is to overcome the defect of the prior art that it is not possible to simultaneously realize dragging and sliding on the same list or search result list.

[0013] In order to achieve the above object, the present invention proposes a list system supporting multi-level and multi-interaction scenarios, the system is used to process a tree list composed of units and activities; the units and activities are node types in the tree list; the subordinates of the units are units or activities; the activities have no subordinates;

[0014] The system comprises:

[0015] Interaction module: used to receive user operations on the page and forward them to the list view module;

[0016] The list view module is used to process the user's dragging or sliding operations on the full display list and the search result list, and render the page display;

[0017] The proxy module is used to process the business logic involved when the list view module operates on the list;

[0018] A reuse pool module, used to cache reusable units or activities in a page; and

[0019] The retrieval module is used to retrieve units or activities according to the query conditions input by the user.

[0020] As an improvement to the above system, the process of handling a drag operation on the full display list includes:

[0021] Step 1: The interaction module receives the user's drag-start action and forwards the action to the list view module;

[0022] Step 2: The list view module determines whether dragging is allowed through the proxy module; if dragging is allowed, go to step 3; if dragging is not allowed, go to step 9;

[0023] Step 3: Initialize the multiplexing pool module;

[0024] Step 4: The list view module folds, draws or moves the card to be dragged; the card includes a unit or an activity;

[0025] Step 5: The interaction module continues to receive the user's dragging action and forwards the action to the list view module;

[0026] Step 6: The list view module obtains all cards through the proxy module, and moves the card positions by dragging the self-rendering function;

[0027] Step 7: the interaction module receives the user's end of the dragging operation and forwards the operation to the list view module;

[0028] Step 8: the list view module processes the view and renders the drag result; the list view module processes the drag data through the proxy module;

[0029] Step 9: End the dragging action and release the dragged resources.

[0030] As an improvement of the above system, the process of processing a drag operation on the search result list includes the process of processing a drag operation on the full display list, and further includes:

[0031] After the card is dragged, the display order of the card is recalculated:

[0032] When a card is dragged between two cards A and B, the display order number of the dragged card is modified to the number of the card with the smaller display order number between the two cards A and B plus the set increment.

[0033] As an improvement to the above system, folding a card refers to displaying the unit in a folded state, specifically including:

[0034] Poll all subordinate units described by the card, and display all subordinate units in a collapsed state;

[0035] When the number of folded lower-level units exceeds a set threshold, all folded lower-level unit data is deleted from the page cache.

[0036] As an improvement of the above system, the drag self-rendering function includes scrolling the page while dragging; specifically, it includes:

[0037] The list view module registers a screen refresh clock with the system; the screen refresh clock refreshes the screen according to a set frequency;

[0038] Each time the system calls back the screen refresh clock, the list view module traverses all data to calculate the display positions of the cards from top to bottom;

[0039] When the list view module receives a card dragging operation from the user, the list view module moves the card to the user dragging position and moves the card to the top layer of the list view;

[0040] The list view module finds the position that needs to be occupied by collision detection between cards, leaves area A for the placeholder, and updates the position of all list cards by animation;

[0041] The list view module uses animation to drag the placeholder image of the card to area A;

[0042] When the user drags the card to the edge of the visible area of ​​the screen list, the list view module scrolls the list card content;

[0043] When the user ends dragging, the screen refresh clock is deregistered.

[0044] As an improvement of the above system, the collision detection is to solve the intersection area of ​​the rectangular areas occupied by the two cards;

[0045] When the area of ​​the intersection is larger than half of the smaller area of ​​the two cards, the two cards are considered to have collided;

[0046] When a collision occurs, the positions of the two cards are swapped; the positions of other cards that have not collided remain unchanged.

[0047] As an improvement of the above system, the drag self-rendering function also includes optimizing the drag display by using a reuse pool module, specifically including:

[0048] Initialize the current use pool and the reuse pool of the reuse pool module; cache the card data of three screens into the reuse pool, and cache the card data of the current visible area into the current use pool; the three screens refer to the current screen, the previous screen of the current screen, and the next screen of the current screen;

[0049] During the dragging process, the card data that exceeds three screens is transferred to the reuse pool according to the card display position calculation;

[0050] During screen scrolling, the card newly entering the third screen is first searched from the reuse pool. If the same card is found, the data is replaced and transferred to the current use pool; if the same card is not found, the initialized card data is put into the current use pool;

[0051] After dragging ends, release the current pool and reuse pool data.

[0052] As an improvement of the above system, the drag self-rendering function further includes:

[0053] When dragging a card on the list, the number of cards displayed by animation is reduced by reusing the current pool of the pool module, and the data that needs to be animated is animated at the same time to complete the page rendering.

[0054] As an improvement to the above system, the side sliding operation of the card specifically includes:

[0055] Step 1: The interaction module receives the user's side sliding action and forwards it to the list view module;

[0056] Step 2: The list view module obtains the content of the card; determines whether the card is a unit or an activity;

[0057] Step 3: The list view module moves the card to the left and displays operation buttons on the right; the operation buttons include: delete and edit. If the card is an activity, go to step 4; if the card is a unit, go to step 5;

[0058] Step 4: Display the edit page when editing an activity; delete the activity when deleting it;

[0059] Step 5: When editing a unit, the editing page is displayed; when deleting a unit, all units and activities under the unit are deleted, or only the unit is deleted according to the user's choice.

[0060] As an improvement of the above system, the step of deleting only the unit further includes setting the subordinate units of the unit and the active parent unit as the parent unit of the unit.

[0061] Compared with the prior art, the advantages of the present invention are:

[0062] The present invention proposes a list system that supports multi-level and multi-interaction scenarios. It extracts a suitable template based on the user's operation behavior, calculates the height of the element based on the data content, and finally presents it to the user. Unlike traditional list implementations, this technical solution supports the interaction of multi-level scenarios, and can complete complex application scenarios such as dragging, sliding, and deleting on a single page. At the same time, due to special animation requirements, self-rendering of dragging can be performed to improve the user experience. It overcomes the problems of poor user experience, low iteration efficiency, and single function of ordinary lists in multi-interaction scenarios. Specifically included are as follows:

[0063] 1. Improve user experience: integrate operations such as list dragging, side sliding, and searching into one page, making it easier for users to organize and edit units and activities;

[0064] 2. Improve iteration efficiency and version compatibility. With the increase of activity types, the content needs to display more activities. The lower version can not jump because there is no details. But it needs to display a brief description of the information. After upgrading, it can be displayed normally; the cards are classified and processed to improve iteration efficiency;

[0065] 3. Rich functions: Supports operations of single units or activities: single click, side sliding, editing, merging, deleting, etc., with rich functions. BRIEF DESCRIPTION OF THE DRAWINGS

[0066] Figure 1 The following is a list system architecture diagram that supports multi-level and multi-interaction scenarios;

[0067] Figure 2 The following is a diagram of the cloud control design structure;

[0068] Figure 3 The following is the architecture diagram for implementing the dragging function. DETAILED DESCRIPTION

[0069] The technical solution of the present invention is described in detail below with reference to the accompanying drawings.

[0070] In the learning management system, classroom content is divided into activities and units. Click on a unit or activity to enter the details. Search and filtering are supported to quickly locate units and activities. Groups have the same activities and units. Different groups contain different activities or the same activities. Teachers have editing permissions and can swipe left to delete and pin. Teachers can long press and drag to edit the ownership of activities and units.

[0071] The present invention provides a list system that supports multi-level and multi-interaction scenarios and mainly includes four core parts: the first part is cloud control design, which supports online grayscale and the ability to add new activities, thereby achieving compatible processing of new and old versions; the second part is to realize the dragging function, self-rendering of dragging placeholders and special effects, and decouple from the business to ensure the consistency of data before and after dragging during data dragging; the third part is the side-sliding function, which maintains the special effects and functions of side-sliding; the fourth part is the search and screening function, which focuses on quickly finding matching units and activities to improve search efficiency. The above four parts cooperate with each other to form a list system for multi-level and multi-interaction scenarios of the learning management system.

[0072] The data source design of this system is as follows: units and activities are different objects. Therefore, the presentation layer is an aggregation of multiple objects. Units contain whether to expand the attribute, and activities are distinguished by type and carry classes with different attributes to complete data encapsulation. The specific data structure is as follows:

[0073] Unit: unitid

[0074] name

[0075] content

[0076] Activity 1: unitid

[0077] name

[0078] content

[0079] activityid

[0080] submitTotal

[0081] correctTotal

[0082] status

[0083] Activity 2: unitid

[0084] name

[0085] content

[0086] joinTotal

[0087] commentCount

[0088] replyCount

[0089] zanCount

[0090] activityid

[0091] status

[0092] In any operation process of the list aggregation page, you need to traverse the list, find the corresponding data, and perform subsequent operations. In the process of finding data, you need to constantly judge the units and different activities to distinguish them.

[0093] like Figure 1 As shown, the list system that supports multi-level and multi-interaction scenarios includes:

[0094] Interaction module: used to receive user operations on the page and forward them to related modules.

[0095] The list view module is used to handle user operations such as dragging and sliding on the list and render the page display.

[0096] The proxy module is used to handle or judge the business logic involved in the dragging process.

[0097] The reuse pool module is used to cache reusable units or activity views in the page.

[0098] The retrieval module is used to retrieve units and activities according to the query conditions input by the user.

[0099] The following is a detailed description of the implementation process of cloud control design, drag function, side sliding function, search and filter function:

[0100] 1. Cloud control design supports online grayscale and new activities, thereby achieving compatible processing of old versions.

[0101] For the old version, compatibility logic processing is performed; for the new version, the new function can be verified through the grayscale switch configured online. Figure 2 As shown in the figure, when the cloud control switch read by the user is in the off state, the processing method is the same as the old version. When the switch read by the user is in the on state, the new function logic is executed. In this way, if the new function has no impact on the old version, if there is a problem when the new version is launched, the new version can be configured to go offline and the old function logic can be executed to ensure the stability of the function.

[0102] 2. The dragging function realizes the self-rendering of dragging placeholders and special effects, decouples from the business, and ensures the consistency of data before and after dragging during the data dragging process.

[0103] In order to decouple from the business, the design is carried out through the proxy method. The controller implements the corresponding proxy, and the controller does not need to pay attention to the conditional judgment of dragging. For example, teachers can drag, but students cannot drag.

[0104] Cards, also known as card views, include unit cards, activity cards, drag cards, and other categories. When dragging a card, you are actually dragging a screenshot of the unit or activity. The screenshot is generated when the drag starts and deleted when the drag ends. During the drag process, the drag position is continuously obtained for self-rendering. When the card needs to be swapped after dragging, the view used as a placeholder is called a drag placeholder.

[0105] When dragging a card, it is also necessary to perform self-rendering to achieve card exchange during the dragging process, display the selected scene of the target unit, and most importantly, to achieve smooth dragging special effects animation. For example, for fast dragging, it is necessary to achieve the follow-up animation special effects of all cards, the special effects of card blank space, etc. Secondly, since there is a problem that the reuse view is temporarily not generated during the dragging process (the reuse view is designed to solve the problems of dragging jams and large internal occupancy), it is necessary to build a temporary reuse pool to solve the problem of non-consumable cards.

[0106] like Figure 3 As shown in the figure, the custom drag list is a list view that integrates the drag card, drag placeholder, and drag self-rendering capabilities. The specific data source and proxy are controlled by the controller, so the drag function and business are decoupled as a whole.

[0107] The custom drag list view is rendered by the list view module. It is a list view that displays activities or units and aggregates the entire drag-capable list.

[0108] The controller is responsible for processing business logic. The custom drag list view and the controller communicate through proxy.

[0109] In the process of implementing the dragging function in the system, the reuse pool module is also needed. The reuse pool module is a cache area for storing reusable unit or activity views; when the activity or unit view slides out of the screen, it will be moved to the reuse pool. When the activity or unit slides into the screen again, the corresponding type of activity or unit view will be taken from the reuse pool. This ensures that the view is reused within a limited number. When the amount of activity is large, it can reduce memory and improve performance.

[0110] The specific steps for this system to implement the drag function are as follows:

[0111] Step 1: The user long presses a unit or activity, and the interaction module receives the user's drag-start action;

[0112] Step 2: The interaction module forwards the action to the list view module;

[0113] Step 3: The list view module determines whether dragging is allowed through the proxy module; dragging is allowed when the user is a teacher, but not allowed when the user is a student. If dragging is allowed, proceed to step 4; if dragging is not allowed, proceed to step 11;

[0114] Step 4: Initialize the reuse pool module, and the list view module folds, draws, and moves the dragged card.

[0115] Folding implementation method: Traditional dragging only exchanges, not folding. This system requires the unit to be folded before dragging. After folding, the folding will cause the position of all list view cards to change, the dragged card position to change, and the placeholder position to change. All list cards need to be rearranged and displayed, and the dragged card and placeholder card need to be moved from the dragged position to the finger position.

[0116] For the specific implementation method of folding, please refer to the technical solution for folding implementation, and the position change is achieved by moving.

[0117] Drawing implementation content: calculate the original display card by the finger pressing position, and take a screenshot of the original card as the dragged card; hide the original card (if the hidden card is reused, it cannot be used later and the display setting will not take effect), and draw a placeholder frame;

[0118] Contents of mobile implementation: After taking a screenshot, dragging the card needs to follow the position of the finger. For specific implementation details, please refer to the self-rendering implementation technical solution;

[0119] Step 5: The user drags the view, and the interaction module receives the action of dragging the view;

[0120] Step 6: The interaction module forwards the action to the list view module;

[0121] Step 7: The list view module obtains all data cards through the proxy module and moves the position by dragging the self-rendering function; wherein the movement of the position includes dragging the placeholder box, dragging the card, unit and active card;

[0122] Step 8: The user raises his hand, and the interaction module receives the drag end or cancellation action;

[0123] Step 9: The interaction module forwards the action to the list view module;

[0124] Step 10: The list view module processes the drag data through the proxy module; data processing includes deletion, addition, and movement; the list view module processes the view, including: deleting the drawing of the drag placeholder box, dragging the card, and restoring the expanded state.

[0125] Step 11: End the dragging action and release the dragged resources.

[0126] The specific contents of the folding implementation technical solution include:

[0127] When dragging a cell, you first need to collapse the cell, that is, collapse all activities or sub-cells under the dragged cell, and also collapse the bottom layer of the expanded multi-level cells. Secondly, you also need to collapse the description of the cell, and only display a maximum of 2 lines of description information, because the description can be very long, and the description of a single card may exceed one screen.

[0128] When folding a dragged unit, you can do it in the same way as clicking on the unit.

[0129] When folding other units, you need to poll one by one to find the unit at the bottom of the expanded multi-level units, call the clicked unit to fold the unit, and then poll all units to fold all details.

[0130] When the number of units or activities that need to be folded and no longer displayed increases, the folding will be stuck, which is manifested as follows: 1. The time required to fold all the units increases; 2. The folding animation becomes discontinuous. In response to the above two problems, we used a data layer to find the data that needs to be folded, modify the folding properties, and delete all the data under the units that need to be folded. Perform a complete refresh and no longer execute the polling folding solution. After trying, when the total number of units and activities reaches 500, the effect of processing according to this solution is better. The overall refresh can make good use of the reuse pool mechanism, thereby improving performance and avoiding the jamming problem caused by the increase in the number of cards.

[0131] The problems that need to be solved by the self-rendering implementation technology solution include:

[0132] Problem 1: Due to the conflict between scrolling and dragging, dragging over one screen cannot achieve dragging and scrolling linkage, and the original dragging capability cannot achieve dragging across screens;

[0133] Problem 2: Reuse problem; that is, the problem of reappearing cards that disappear when scrolling;

[0134] Question 3: Card collision detection;

[0135] Question 4: Smooth animation effects during dragging.

[0136] The implementation content of the self-rendering implementation technical solution includes:

[0137] For issue 1, drag and scroll conflict solutions include:

[0138] When the user long presses the screen card, self-rendering is triggered;

[0139] The list view module registers the screen refresh clock with the system, and the screen refresh clock is refreshed at a frequency of 30 frames per second;

[0140] Every time the system calls back the screen refresh clock, the list view module calculates the display position of the cards from top to bottom by traversing all data sources;

[0141] When the user drags the card with his finger, the list view module moves the card to the dragged position and moves the card to the top of the list view to prevent it from being covered.

[0142] The list view module finds the position that needs to be occupied by dragging cards and list cards to collide, leaving area A for the placeholder, and updates the position of all list cards through animation;

[0143] The list view module uses animation to move the placeholder image to area A;

[0144] When the user drags a card to the edge of the visible area of ​​the screen list, the list view module scrolls the list card content to let the user feel the drag effect;

[0145] When the user ends dragging, unregister the clock.

[0146] For problem 2, the reuse pool module is used to solve the reuse problem. The specific working process of the reuse pool module includes:

[0147] The reuse pool module consists of two parts: the current pool and the reuse pool. At the beginning, the reuse pool is used to initialize the card data of three screens (initialized in advance): the cards of the current screen, the cards of the previous screen, and the cards of the next screen. At least the number of cards in the current visible area is initialized to the current pool.

[0148] Step 1: During the user dragging process, the cards that exceed three screens are transferred to the reuse pool according to the card display position.

[0149] Step 2: The new card entering the three-screen is first searched from the reuse pool. If the same card is found, the data is replaced and transferred to the current use pool. If the same card is not found, the new card is initialized and put into the current use pool.

[0150] Step 3: Repeat steps 1 and 2 until the dragging is finished.

[0151] Step 4: After dragging is completed, release the reuse pool and the current pool.

[0152] For question 3, the card collision detection process includes:

[0153] When rendering, collision detection requires all cards to be laid out. The dragged card needs to occupy a place in the list, so the position of the dragged placeholder card needs to be calculated. The principle of collision detection is to find the intersection area of ​​​​two rectangles.

[0154] The specific collision needs to distinguish between dragging upwards and dragging downwards:

[0155] To better illustrate collision detection, let's assume there are several cards AB CDEFG. The dragged card is D1 generated by D.

[0156] When dragging upwards, dragging 0 pixels:

[0157] AB does not intersect on D1, and the position of AB remains unchanged

[0158] C is above D1, the bottom of C and the top of D1 just intersect, the position of C remains unchanged. The position of D remains unchanged.

[0159] The data of D and D1 are the same. Hide D and show D1. Although D is hidden, the position of D1 needs to be calculated. The cache position of D data is the same as the actual position. There is no need to modify the position with animation.

[0160] E is below D1, and the bottom of D1 intersects the top of E. The position of E remains unchanged (the unchanged data is calculated through ABCD).

[0161] FG does not intersect under D1, and the position of FG remains unchanged, which is calculated by ABCDE.

[0162] Continue dragging upward until the height of the intersection of D1 and C is half the height of the smaller of D1 and C:

[0163] AB does not intersect on D1, and the position of AB remains unchanged.

[0164] C is above D1, and the intersection height is half of the smaller height of the two. C moves to the position of D. Since the position of C in the data and the actual displayed position have changed, animation is needed to make the user feel the drag.

[0165] D and D1 are the same data, hide D and show D1. Although D is hidden, it is necessary to calculate the position of D1, which is the original position of C.

[0166] EFG do not intersect under D1 and their positions remain unchanged.

[0167] The card the user sees at this time is: ABD1CEFG, where D1 and C intersect.

[0168] Continue dragging upward until the bottom of D1 and the top of C coincide with each other:

[0169] A does not intersect with D1 and its position remains unchanged.

[0170] B is above D1, and the bottom of B coincides with the top of D1. The position of B remains unchanged.

[0171] D and D1 are the same data. Hide D and show D1. Although D is hidden, the position of D1's placeholder needs to be calculated. The position of D's cache is exactly the same as the placeholder, so there is no need to animate the position.

[0172] C is below D1, and the top of C coincides with D1. The cached position of C coincides with the position calculated by ABD, and C does not need to modify its position through animation.

[0173] EFG do not intersect under D1 and their positions remain unchanged.

[0174] Continuing to drag upward will continue to repeat the above collision detection logic, except that the intersecting card changes from C to B.

[0175] The idea of ​​dragging downward is similar to dragging upward, except that the intersecting card changes from C to E.

[0176] In the actual detection process, it is also necessary to consider the detection logic of collision without movement and multi-card collision. It is also necessary to handle special processing of dragging to the top and bottom, as well as processing based on reverse order, etc., but the basic principle is the processing of special scenarios after collision detection.

[0177] For question 4, the smooth animation effects technology during dragging includes:

[0178] During fast dragging, multiple cards will move at the same time. If they are animated separately, the animation of the upper card will be completed later than the animation of the lower card, resulting in visually discontinuous animation. Of course, not all data can be animated.

[0179] Therefore, the following solution is adopted:

[0180] By reusing the current pool of the pool module, the size of cards using animations can be reduced, thereby improving performance; the data that needs to be animated is animated with the same time animation to complete page rendering.

[0181] 3. Side-sliding function: The special feature of the side-sliding function is that there are two different operation modes for side-sliding deletion: deleting all contents belonging to a unit and retaining all contents belonging to a unit.

[0182] To delete all content, you need to traverse all content in the unit and delete them. If you do not want to delete all content, you need to find the unit to which the current card belongs as the new parent unit, change the unitid of all the next-level cards to the new parent unit id, and move all the next-level cards to the new parent unit. If it is already the top-level unit, change the unitid of all the next-level cards to -1.

[0183] The specific implementation process is as follows:

[0184] Step 1: The interaction module receives the user's side sliding action;

[0185] Step 2: The interaction module forwards the action to the list view module;

[0186] Step 3: The list view module obtains the node content, including the node ID and node attributes; and determines the node type according to the node attributes;

[0187] Step 4: The list view module moves the node to the left and displays the operation buttons on the right, including: delete and edit. If it is an activity, go to step 5; if it is a unit, go to step 6;

[0188] Step 5: Click Edit to edit the activity; click Delete to pop up a second confirmation window;

[0189] Step 6: Click Edit on the cell to edit the cell; click Delete on the cell to pop up the operation window, which includes: deleting all activities under the cell and merging cells.

[0190] 4. Search and filter functions: The difficulty of the search and filter functions lies in the dragging operation on the search results. During the dragging operation, the data generated by the search is incomplete, but the consistency of the data must be ensured. For example, if there are two activities under the same unit in the search results, and you drag one activity to the unit, there are three situations:

[0191] Case 1: Drag to the top of the first activity;

[0192] Case 2: Drag to the bottom of the first activity;

[0193] Case 3: Drag to the bottom of the second activity.

[0194] If the ascending order and descending order are added, the implementation will be more complicated. The dragging effect is the same as the previous self-rendering. The key to implementing these three situations is to find the position to be displayed after dragging to the target position. The position number may have several situations: repeated, non-repeated, generate a new number, and finally update the sorting.

[0195] In the process of implementing the entire technical solution, dragging is the most complicated, because the conventional implementation is to create a new page and use the system capabilities to exchange simple dragging capabilities. In order to improve the user experience, this system integrates dragging into search, side-slide and sliding lists, and implements a list implementation solution for multiple interactive scenarios. In addition to solving the single problem of dragging, there will also be dragging under search conditions, and there will also be dragging and sorting problems under reverse sorting. It is necessary to realize search, side-slide, and a list with folding and self-rendering capabilities. Among them, self-rendering must have reuse capabilities, collision detection and collision movement, and must also ensure smooth animation effects.

[0196] The key to processing in chronological order is to align with the small numbers.

[0197] The drag processing process under the positive order search condition includes:

[0198] Assume that the cards displayed in full are ABCDEFG, and if the search result shows ACDF, the dragging process is no different from the normal dragging process.

[0199] In the search case, the cards are displayed in discontinuous order, for example, as ACDF;

[0200] Case 1: Drag D onto A, and the final full result is displayed as: DABCEFG;

[0201] Case 2: Drag D to between AC, and the final full result is displayed as: ADBCEFG;

[0202] Case 3: Drag D to below F, and the final full result is displayed as: ABCEFDG.

[0203] Switch to dragging under reverse search conditions. The full data is displayed as GFEDCBA. Assuming the search result is FDCA, the dragging process is no different from normal dragging:

[0204] In the search situation, the cards are displayed in discontinuous order, for example, FDCA is displayed;

[0205] Case 1: Drag D to F, and the final full result is displayed as: GDFECBA;

[0206] Case 2: Drag D to between CA, and the final full result is displayed as: GFECBDA;

[0207] Case 3: Drag D below A, and the final full result is displayed as: GFECBAD.

[0208] The beneficial effects brought by the technical solution of the present invention can be summarized as follows:

[0209] 1. Improve user experience: Integrate list dragging, sliding, searching and other operations into one page to facilitate users to organize and edit units and activities.

[0210] 2. Improve iteration efficiency and version compatibility. With the increase of activity types, the content needs to display more activities. The lower version can not jump because there is no details. But it needs to display a brief description of the information. After upgrading, it can be displayed normally; the cards are classified and processed to improve iteration efficiency.

[0211] 3. Rich functions: Supports operations of single units or activities: single click, side sliding, editing, merging, deleting, etc., with rich functions.

[0212] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and are not intended to limit the present invention. Although the present invention is described in detail with reference to the embodiments, it should be understood by those skilled in the art that any modification or equivalent replacement of the technical solutions of the present invention does not depart from the spirit and scope of the technical solutions of the present invention and should be included in the scope of the claims of the present invention.

Claims

1. A list system supporting multi-level and multi-interaction scenarios, the system being used to process a tree list consisting of units and activities; the units and activities are node types in the tree list; The lower level of the unit is the unit or activity; The activity has no subordinates; Characterized in that the system comprises: Interaction module: used to receive user operations on the page and forward them to the list view module; The list view module is used to process the user's dragging or sliding operations on the full display list and the search result list, and render the page display; The proxy module is used to process the business logic involved when the list view module operates on the list; A reuse pool module, used to cache reusable units or activities in a page; and The retrieval module is used to retrieve units or activities according to the query conditions input by the user.

2. The list system supporting multi-level and multi-interaction scenarios according to claim 1, characterized in that: The process of handling a drag operation on the full display list includes: Step 1: The interaction module receives the user's drag-start action and forwards the action to the list view module; Step 2: The list view module determines whether dragging is allowed through the proxy module; if dragging is allowed, go to step 3; if dragging is not allowed, go to step 9; Step 3: Initialize the multiplexing pool module; Step 4: The list view module folds, draws or moves the card to be dragged; the card includes a unit or an activity; Step 5: The interaction module continues to receive the user's dragging action and forwards the action to the list view module; Step 6: The list view module obtains all cards through the proxy module, and moves the card positions by dragging the self-rendering function; Step 7: the interaction module receives the user's end of the dragging operation and forwards the operation to the list view module; Step 8: the list view module processes the view and renders the drag result; the list view module processes the drag data through the proxy module; Step 9: End the dragging action and release the dragged resources.

3. The list system supporting multi-level and multi-interaction scenarios according to claim 2, characterized in that: The process of processing the drag operation on the search result list includes the process of processing the drag operation on the full display list, and further includes: After the card is dragged, the display order of the card is recalculated: When a card is dragged between two cards A and B, the display order number of the dragged card is modified to the number of the card with the smaller display order number between the two cards A and B plus the set increment.

4. The list system supporting multi-level and multi-interaction scenarios according to claim 2, characterized in that: Folding a card means displaying the unit in a folded state, including: Poll all subordinate units of the card and display all subordinate units in a collapsed state; When the number of folded lower-level units exceeds a set threshold, all folded lower-level unit data is deleted from the page cache.

5. The list system supporting multi-level and multi-interaction scenarios according to claim 2, characterized in that: The drag self-rendering function includes scrolling the page while dragging; specifically includes: The list view module registers a screen refresh clock with the system; the screen refresh clock refreshes the screen according to a set frequency; Each time the system calls back the screen refresh clock, the list view module traverses all data to calculate the display positions of the cards from top to bottom; When the list view module receives a card dragging operation from the user, the list view module moves the card to the user dragging position and moves the card to the top layer of the list view; The list view module finds the position that needs to be occupied by collision detection between cards, leaves area A for the placeholder, and updates the position of all list cards by animation; The list view module uses animation to drag the placeholder image of the card to area A; When the user drags the card to the edge of the visible area of ​​the screen list, the list view module scrolls the list card content; When the user ends dragging, the screen refresh clock is deregistered.

6. The list system supporting multi-level and multi-interaction scenarios according to claim 5, characterized in that: The collision detection is to solve the intersection area of ​​the rectangular areas occupied by the two cards; When the area of ​​the intersection is larger than half of the smaller area of ​​the two cards, the two cards are considered to have collided; When a collision occurs, the positions of the two cards are swapped; the positions of other cards that have not collided remain unchanged.

7. The list system supporting multi-level and multi-interaction scenarios according to claim 5, characterized in that: The drag self-rendering function also includes optimizing the drag display by using a reuse pool module, specifically including: Initialize the current use pool and the reuse pool of the reuse pool module; cache the card data of three screens into the reuse pool, and cache the card data of the current visible area into the current use pool; the three screens refer to the current screen, the previous screen of the current screen, and the next screen of the current screen; During the dragging process, the card data that exceeds three screens is transferred to the reuse pool according to the card display position calculation; During screen scrolling, the card newly entering the third screen is first searched from the reuse pool. If the same card is found, the data is replaced and transferred to the current use pool; if the same card is not found, the initialized card data is put into the current use pool; After dragging ends, release the current pool and reuse pool data.

8. The list system supporting multi-level and multi-interaction scenarios according to claim 5, characterized in that: The drag self-rendering function also includes: When dragging a card on the list, the number of cards displayed by animation is reduced by reusing the current pool of the pool module, and the data that needs to be animated is animated at the same time to complete the page rendering.

9. The list system supporting multi-level and multi-interaction scenarios according to claim 1, characterized in that: The side sliding operation of the card specifically includes: Step 1: The interaction module receives the user's side sliding action and forwards it to the list view module; Step 2: The list view module obtains the content of the card; determines whether the card is a unit or an activity; Step 3: The list view module moves the card to the left and displays operation buttons on the right; the operation buttons include: delete and edit. If the card is an activity, go to step 4; if the card is a unit, go to step 5; Step 4: Display the edit page when editing an activity; delete the activity when deleting it; Step 5: When editing a unit, the editing page is displayed; when deleting a unit, all units and activities under the unit are deleted, or only the unit is deleted according to the user's choice.

10. The list system supporting multi-level and multi-interaction scenarios according to claim 9, characterized in that: The step of only deleting the unit also includes setting the subordinate units of the unit and the active parent unit as the parent unit of the unit.

Images