Component dragging layout method and device based on front-end interaction and electronic equipment

Abstract

The invention belongs to the technical field of visual interfaces, and discloses a component dragging layout method and device based on front-end interaction and electronic equipment, and the method comprises the steps: obtaining a user operation of a target user for a target box in a user interface; if the user operation is the operation of pressing a preset shortcut key, updating the state identifier of the target box to a target state identifier corresponding to the preset shortcut key according to a processing mode corresponding to the preset shortcut key, and calculating the position and the size of the target box; different preset shortcut keys correspond to different state identifiers, each state identifier corresponds to an area of the user interface, and different state identifiers correspond to different areas; based on the position and the size of the target box, the target box is dragged and arranged in an area corresponding to the target state identifier, and the component corresponding to the target box is displayed in the target box. According to the method and the device, the target box can be dragged and arranged to different areas of the user interface, namely, flexible component dragging and arrangement is realized.

Description

Technical Field

[0001] The present invention belongs to the technical field of visualization interfaces, and particularly relates to a component dragging layout method, device, and electronic device based on front-end interaction. Background Art

[0002] With the development of information technology, user interface design has also been evolving continuously, from the initial static web pages to the current highly interactive dynamic applications. In this process, the dragging layout technology has gradually become an indispensable part of front-end development. Dragging layout is a user interface design technology that allows users to rearrange components on the interface through drag-and-drop operations. This technology is widely used in various software and web design to provide an intuitive and flexible user interaction experience.

[0003] The existing component dragging layout methods usually are: implementing the dragging layout based on the grid concept. Specifically, corresponding grids are designed for different components, and each component can only be dragged within its corresponding grid, resulting in great limitations in the dragging layout of components in the user interface, and thus unable to meet the personalized needs of users. Summary of the Invention

[0004] The purpose of the present invention is to flexibly perform dragging layout on components in the user interface, so as to meet the personalized needs of users.

[0005] In a first aspect, an embodiment of the present invention provides a component dragging layout method based on front-end interaction, and the method includes:

[0006] Obtain a user operation of a target user on a target box in the user interface, where the user interface includes multiple components, each component corresponds to a box, the target box is any one of the multiple boxes, and the user operation includes pressing a preset shortcut key operation and a dragging operation;

[0007] If the user operation is pressing a preset shortcut key operation, update the status identifier of the target box to the target status identifier corresponding to the preset shortcut key according to the processing method corresponding to the preset shortcut key, and calculate the position and size of the target box; different preset shortcut keys correspond to different status identifiers, each status identifier corresponds to a region of the user interface, and the regions corresponding to different status identifiers are different;

[0008] Based on the position and size of the target box, drag and layout the target box to the region corresponding to the target status identifier, and display the component corresponding to the target box in the target box.

[0009] Optionally, the method further includes:

[0010] If the user operation is a drag operation and a first drag movement event for the edge of the target box is detected, continuously monitor the first drag movement event for the edge of the target box, and calculate and update the size of the target box in real time according to the first drag movement event;

[0011] When a drag end event for the edge of the target box is detected, stop updating the size of the target box;

[0012] Based on the updated size of the target box, display the target box in the user interface and display the components corresponding to the target box in the target box.

[0013] Optionally, the method further includes:

[0014] If the user operation is a drag operation and a second drag movement event for other areas is detected, continuously monitor the second drag movement event, and calculate the first boundary coordinates of the user interface according to the size and layout of the user interface, where the other areas are the areas inside the target box except the edge;

[0015] During the process of continuously monitoring the second drag movement event, calculate the second boundary coordinates of the target box in real time according to the second drag movement event, compare the second boundary coordinates with the first boundary coordinates in real time, and update the position of the target box in real time;

[0016] When the second boundary coordinates are the same as the first boundary coordinates, control the target box to stop moving outside the user interface.

[0017] Optionally, the method further includes:

[0018] Record the attribute information of the target box, where the attribute information includes the position and size;

[0019] Generate first JSON data based on the attribute information of the target box;

[0020] Send the first JSON data to the server so that the server saves the first JSON data.

[0021] Optionally, before obtaining the user operation of the target user on the target box in the user interface, the method further includes:

[0022] In response to receiving an open instruction for the user interface, determine whether second JSON data of the user interface is stored in the server, where the second JSON data is generated based on the user's historical operations on the user interface;

[0023] If the second JSON data is stored in the server, obtain the second JSON data from the server;

[0024] Parse the second JSON data, and render the user interface based on the attribute information of the target box obtained by parsing.

[0025] Optionally, the parsing the second JSON data and rendering the user interface based on the attribute information of the target box obtained by parsing includes:

[0026] Traverse each data object in the second JSON data;

[0027] For each data object, determine the instance to be created based on the type information corresponding to the data object;

[0028] If the instance to be created is the target box, create the target box in the user interface based on the attribute information of the target box in the second JSON data, and set a status identifier and a drag event listening function for the target box;

[0029] Display the component corresponding to the target box on the target box.

[0030] Optionally, the box in the user interface is provided with a hierarchical attribute, the hierarchical attribute includes a first level and a second level, the priority of the first level is higher than the priority of the second level, and the method further includes:

[0031] Count the operation frequency of the target user on the target box;

[0032] If the operation frequency is greater than a preset frequency, set the level of the target box to the first level;

[0033] If the operation frequency is less than the preset frequency, set the level of the target box to the second level.

[0034] In a second aspect, an embodiment of the present invention provides a component drag-and-drop layout device based on front-end interaction, and the device includes:

[0035] A user operation acquisition module, configured to acquire a user operation of a target user on a target box in a user interface, the user interface includes a plurality of components, each component corresponds to a box, the target box is any one of the plurality of boxes, and the user operation includes pressing a preset shortcut key operation and a drag operation;

[0036] A target box attribute update module, which is used to, if the user operation is a preset shortcut key press operation, update the status identifier of the target box to the target status identifier corresponding to the preset shortcut key according to the processing method corresponding to the preset shortcut key, and calculate the position and size of the target box; different preset shortcut keys correspond to different status identifiers, each status identifier corresponds to a region of the user interface, and the regions corresponding to different status identifiers are different;

[0037] A target box drag-and-drop layout module, which is used to, based on the position and size of the target box, drag and drop the target box to the region corresponding to the target status identifier, and display the components corresponding to the target box in the target box.

[0038] In a third aspect, an embodiment of the present invention provides an electronic device, including:

[0039] At least one processor;

[0040] A memory for storing executable instructions of the at least one processor;

[0041] Wherein, the at least one processor is configured to execute the instructions to implement the method described in the first aspect.

[0042] In a fourth aspect, an embodiment of the present invention provides a computer-readable storage medium, when the instructions in the computer-readable storage medium are executed by a processor of an electronic device, enabling the electronic device to execute the method described in the first aspect.

[0043] The technical solution provided by the embodiment of the present invention is to obtain a user operation of a target user on a target box in a user interface. If the user operation is a preset shortcut key press operation, update the status identifier of the target box to the target status identifier corresponding to the preset shortcut key according to the processing method corresponding to the preset shortcut key, and calculate the position and size of the target box; finally, based on the position and size of the target box, drag and drop the target box to the region corresponding to the target status identifier, and display the components corresponding to the target box in the target box. It can be seen that by setting different processing methods corresponding to different shortcut keys, the target box can be dragged and dropped to different regions of the user interface, and by calculating the position and size of the target box, the target box can be reasonably displayed in the user interface at the position and size predefined by the user. By displaying the components corresponding to the target box in the target box, the user can flexibly perform component drag-and-drop layout, meeting the personalized needs of the user. Description of the Drawings

[0044] Figure 1 It is a flowchart of the overall technical solution provided by the embodiment of the present invention;

[0045] Figure 2 A flowchart of a component drag-and-drop layout method based on front-end interaction provided by an embodiment of the present invention;

[0046] Figure 3 A flowchart of another component drag-and-drop layout method based on front-end interaction provided by an embodiment of the present invention;

[0047] Figure 4 A schematic structural diagram of a component drag-and-drop layout device based on front-end interaction provided by an embodiment of the present invention;

[0048] Figure 5 A schematic structural diagram of an electronic device provided by an embodiment of the present invention. Detailed implementation manners

[0049] The present invention will be described in detail below through embodiments.

[0050] With the development of information technology, user interface design has also been continuously evolving, from the initial static web pages to the current highly interactive dynamic applications. In this process, the drag-and-drop layout technology has gradually become an indispensable part of front-end development. Drag-and-drop layout is a user interface design technology that allows users to rearrange the components on the interface through drag-and-drop operations. This technology is widely used in various software and web design to provide an intuitive and flexible user interaction experience.

[0051] The existing component drag-and-drop layout methods are usually: implementing drag-and-drop layout based on the grid concept. Specifically, corresponding grids are designed for different components, and each component can only be dragged within its corresponding grid, resulting in great limitations in the drag-and-drop layout of components in the user interface. That is to say, when a user drags and drops a component, the component can only be dragged and laid out within the grid corresponding to the component, and cannot be dragged and laid out in other areas of the user interface, thus unable to meet the personalized needs of users.

[0052] To solve the above technical problems, an embodiment of the present invention provides a component drag-and-drop layout method based on front-end interaction, so that users can drag and drop components in different areas of the user interface, and thus flexibly drag and drop components. For example, a component can be flexibly moved to the top area, bottom area, right area, left area, etc. of the user interface. Moreover, the user interface can adapt to the width and height of the terminal screen.

[0053] For the sake of clear description of the solution, first, the overall technical solution of the embodiment of the present invention will be elaborated in detail.

[0054] It should be noted that the user interface includes multiple components, each component corresponding to a box, and each component is placed in the box corresponding to it. The component can be a button or a text box, etc. The component can be displayed and interacted only when it is placed in the box. The box is used to organize and layout the components to ensure the overall layout of the user interface is reasonable and beautiful. The user interface includes multiple components and also multiple boxes. The user can drag and layout the boxes to achieve the drag and layout of the components. That is to say, by dragging and laying out the boxes to different areas of the user interface, the components in the boxes can be dragged and laid out to different areas of the user interface.

[0055] In the embodiment of the present invention, the Flex layout (Flexible Box Layout) can be used to achieve the free dragging and adaptive arrangement of multiple boxes. And the direction of the main axis is defined in the Flex layout, and the alignment modes of multiple boxes on the main axis and the cross axis are controlled to ensure the beautiful and orderly layout.

[0056] At the same time, multiple boxes in the user interface can construct a multi-level layout. Specifically, the levels of multiple boxes can be distinguished, and the boxes with a high user operation frequency can be set as boxes at a higher level. In this way, it is convenient for the user to operate the boxes at a higher level. And the boxes with a low user operation frequency can be set as boxes at a lower level. In this way, when the user drags the boxes at a higher level, the boxes at a lower level will not block the boxes at a higher level.

[0057] Next, the interaction process of the user dragging and laying out the components will be elaborated. As Figure 1 shown.

[0058] S110, when it is detected that the user enters the user interface, it can be judged whether the user currently enters the user interface for the first time. If so, execute S120; otherwise, execute S130.

[0059] Specifically, when it is detected that the user enters the user interface, it can be judged whether the user currently enters the user interface for the first time. If the user currently enters the user interface for the first time, then the user interface needs to be restored, that is, the user interface of the user's last operation is restored. At this time, step S120 needs to be executed. If the user currently does not enter the user interface for the first time, then the user interface does not need to be restored, that is, the user interface of the user's last operation does not need to be restored. At this time, step S130 is executed.

[0060] S120, send a JSON data acquisition request to the server, receive the JSON data fed back by the server, and render the user interface based on the JSON data.

[0061] The JSON data includes the attribute information of each element in the user interface. If the element is a box, then the attribute information may include: ID, direction, type, size, position, status flag, stretch size range, title, and operation list.

[0062] Among them, the ID is the unique identifier of the box. The direction refers to the direction information of the box, that is, the position of the box relative to the user interface (at the top, bottom, left, or right of the user interface). The type refers to the status type of the box, that is, whether the box can be dragged, docked, etc. The size refers to the fixed size of the box, that is, the length, width, height, etc. of the box. The position refers to the position coordinates of the element in the user interface. The status flag can be placeholder dock, undocked undock, up, down, left, right, etc. The stretch size range refers to the maximum and minimum sizes of the box stretch. The operation list refers to a series of operation items and their icons of the components in the box.

[0063] After the terminal obtains the JSON data from the server, it parses the JSON data and performs the following operations according to the parsed JSON data:

[0064] (1) Element creation. Traverse each element object in the parsed JSON data and create a corresponding interface element instance according to the type information of the element. For example, if the JSON data indicates that a certain element is a draggable box, then the terminal can create a corresponding draggable box instance.

[0065] (2) Attribute setting. For each created interface element instance, set the corresponding attribute values in the JSON data to the interface element instance one by one. Taking the interface element instance as a draggable box instance as an example, after creating the draggable box instance, the style attributes (such as color, font, and border style, etc.), position attributes (such as the coordinate position in the user interface), size attributes (such as width and height), and status flag (such as setting to placeholder dock, undocked undock, up, down, left, right, etc. status flags) of the draggable box instance can be set.

[0066] (3) Layout arrangement. According to the information about the element arrangement order and layout method in the JSON data, arrange each created element reasonably on the page. If the JSON data specifies the use of Flex layout and clarifies layout parameters such as the direction of the main axis, the alignment methods of multiple boxes on the main axis and cross axis, etc., the terminal will implement the adaptive arrangement and alignment methods of the elements according to these parameter settings to ensure the page layout is beautiful and orderly.

[0067] (4) Interactive binding: According to the executable operation information of elements recorded in the JSON data, corresponding interactive events and operation logics are bound to each element. For example, if the JSON data indicates that a box element can be stretched, the terminal binds mouse event listeners (such as mouse press event, mouse move event, mouse release event, etc.) to the box to implement the stretching function of the box size, and processes according to the operation logic in the JSON data, updates the attribute information of the box during stretching, and displays the animation effect of the box during stretching.

[0068] S130, determine whether the user operation is a preset shortcut key press operation or a drag operation. If the user operation is a preset shortcut key press operation, execute steps S140 to S160; if the user operation is a drag operation, execute step S170.

[0069] If it is determined that the user is not entering the user interface for the first time, then there is no need to re-render the user interface. At this time, it is necessary to determine whether the user operation is a preset shortcut key press operation or a drag operation.

[0070] In practical applications, the user can preset multiple preset shortcut keys in advance and set different preset shortcut keys to correspond to different predefined processing logics. When the user presses different preset shortcut keys, the terminal executes different predefined processing logics on the current box, thereby realizing dragging and arranging the current box to different areas of the user interface. In this way, the user can flexibly perform component dragging and layout.

[0071] S140, obtain the status identifier of the current box.

[0072] In the embodiments of the present invention, a clear and rich status identifier is set for each box. That is to say, different status identifiers can be set for each box. These status identifiers can include: dock; undock; fixed; the box moves up in the user interface (up), for example, the box can move to the top area of the user interface; the box moves down in the user interface (down), for example, the box can move to the bottom area of the user interface; the box moves left in the user interface (left), for example, the box can move to the left area of the user interface; the box moves right in the user interface (right), for example, the box can move to the right area of the user interface.

[0073] S150, update the status identifier of the current box according to the predefined logic processing, and calculate the attribute information such as the position and size of the current box; display the current box in the user interface according to the calculated attribute information.

[0074] If the user operation is to press a preset shortcut key, then, based on the correspondence between the preset shortcut key and the predefined logic, the predefined logic corresponding to the currently pressed preset shortcut key can be determined, and processing can be performed according to this predefined logic. This processing process may include: updating the status identifier of the current box. For example, if the predefined logic is to drag and layout the current box to the top area of the user interface, then update the status identifier of the current box to up.

[0075] Moreover, the predefined logic may further include the position and size of the current box defined by the user. By calculating the position and size of the current box, the terminal can determine the position to which the current box is to be moved and the size of the current box in the user interface. For example, after updating the status identifier of the current box to up, it can be determined to move the current box upward. By calculating the position and size of the current box, it can be determined to which position the current box is to be moved upward, and the current box can be displayed at this position according to the calculated size of the current box. It can be seen that by calculating the position and size of the current box, the current box can be reasonably displayed in the user interface with the position and size predefined by the user, and thus flexible drag-and-drop layout components can be realized, meeting the personalized needs of users.

[0076] Moreover, in the predefined logic, the user can also predefine the style rules of the current box. In this way, the terminal can update the style attributes of the box border according to the predefined style rules of the current box.

[0077] S160, Generate JSON data based on the attribute information of the current box calculated in S150, and send the JSON data to the server.

[0078] In order to enable the terminal to restore the user interface of the user's last operation when the user enters the user interface next time, therefore, after calculating the attribute information of the current box through S150, JSON data can be generated based on the calculated attribute information of the current box, so as to record the user-operated interface in real time. And when the user enters the user interface next time, the terminal can obtain JSON data from the server, parse the JSON data, and render the user interface based on the parsed data, thus restoring the user interface of the user's last operation.

[0079] S170, Determine whether a drag operation is performed on the edge of the current box. If so, execute steps S180 to step S1100; if not, execute step S1110.

[0080] Specifically, if the user operation is a drag operation, continue to determine whether the user is performing a drag operation on the edge of the current box. If it is determined that the user is performing a drag operation on the edge of the current box, then, execute steps S180 to S1100. Otherwise, execute step S1110.

[0081] S180, Listen for mouse movement events and update the size of the current box in real time.

[0082] S190, When the mouse release event is detected, stop updating the size of the current box.

[0083] S1100, Generate JSON data based on the size of the current box and send the JSON data to the server.

[0084] Specifically, if the terminal detects a drag operation on the edge of the current box, continue to continuously listen for mouse movement events. This mouse movement event is the drag movement event for the edge of the current box, and calculate the size of the current box in real time. When the mouse release event is detected, stop updating the size of the current box. At this time, the user has completed the drag operation on the edge of the current box. And, during this process, a debounce or throttle mechanism can be introduced, such as introducing lodash library functions, to avoid jitter or lag in the user interface caused by frequent dragging of the box. Those skilled in the art should be able to understand the lodash library functions and will not be elaborated here.

[0085] And, to enhance the user experience, a box stretching animation effect can be added. For example, the transition property of CSS (Cascading Style Sheets) can be used to achieve an animation with a better visual effect, making the change in the size of the box smoother and more natural.

[0086] In order to enable the terminal to restore the user interface of the user's last operation when the user enters the user interface next time, JSON data can be generated based on the size of the current box and sent to the server. When the user enters the user interface next time, the terminal can obtain the JSON data from the server, parse the JSON data, and render the user interface based on the data obtained from the parsing, thereby restoring the user interface of the user's last operation.

[0087] S1110, Start the drag listening event for the current box.

[0088] S1120, Determine whether the boundary of the current box exceeds the set boundary during the process of dragging the current box. If yes, execute step S1130; if no, execute steps S1140 to S1150.

[0089] S1130, prevent the current box from being dragged outwards further, ensuring that the current box remains within the visible area.

[0090] S1140, update the position of the current box.

[0091] S1150, generate JSON data based on the position of the current box in S1140 and send the JSON data to the server.

[0092] Specifically, if the user does not perform a drag operation on the edge of the current box, start the drag listening event for the current box, that is, listen for the user's drag operation on other areas of the current box except the edge. If such a drag operation is detected, then the boundary coordinates of the current box can be calculated in real time, the position of the current box can be updated in real time, and the boundary coordinates of the current box can be compared with the boundary coordinates of the user interface to determine whether the boundary of the current box exceeds the set boundary during the process of dragging the current box. If the boundary of the current box exceeds the set boundary, then prevent the current box from being dragged outwards further, ensuring that the current box remains within the visible area.

[0093] In order to enable the terminal to restore the user interface of the user's last operation when the user enters the user interface next time, JSON data can be generated based on the updated position of the current box and sent to the server. When the user enters the user interface next time, the terminal can obtain the JSON data from the server, parse the JSON data, and render the user interface based on the data obtained from the parsing, thereby restoring the user interface of the user's last operation.

[0094] The above describes the drag and stretch layout of the box in the user interface, and the component is located inside the box. Therefore, the key attributes and behavior parameters of the component can be parameterized to achieve flexible configuration in different application scenarios. Specifically, attributes such as the initial size of the box, the draggable range, and the stretch limit are used as parameters of the component. By synchronously updating the component parameters during the process of dragging and laying out the box, a drag-and-drop custom layout component that meets different requirements can be quickly generated.

[0095] In addition, the embodiments of the present invention provide default style rules (such as font, color, size, etc.) for the slot content to make its appearance and behavior consistent in different boxes. At the same time, a customization mechanism can be provided, enabling users to conveniently and flexibly add various boxes with different functions and styles in the user interface.

[0096] After elaborating on the overall technical solution of the embodiments of the present invention in detail, the following will elaborate on a component drag-and-drop layout method, device, and electronic device provided by the embodiments of the present invention.

[0097] Such as Figure 2As shown in the figure, a component drag-and-drop layout method based on front-end interaction provided by an embodiment of the present invention may include the following steps:

[0098] S210, obtain a user operation of a target user on a target box in a user interface.

[0099] Among them, the user interface includes multiple components, each component corresponds to a box, the target box is any one of the multiple boxes, and the user operation includes pressing a preset shortcut key operation and a drag operation.

[0100] When the target user needs to operate the user interface, the target user can input a user operation on the target box in the user interface through a terminal. In this way, the terminal can obtain the user operation on the target box in the user interface. Among them, the target box is any box to be operated by the user.

[0101] S220, if the user operation is pressing a preset shortcut key operation, update the status identifier of the target box to the target status identifier corresponding to the preset shortcut key according to the processing method corresponding to the preset shortcut key, and calculate the position and size of the target box.

[0102] Among them, different preset shortcut keys correspond to different status identifiers, each status identifier corresponds to an area of the user interface, and the areas corresponding to different status identifiers are different.

[0103] S230, based on the position and size of the target box, drag and layout the target box into the area corresponding to the target status identifier, and display the component corresponding to the target box in the target box.

[0104] In practical applications, the user can pre-set multiple preset shortcut keys for the target box and set different pre-defined processing logics corresponding to different preset shortcut keys, that is, different preset shortcut keys correspond to different processing methods. When the user selects the target box and presses different preset shortcut keys, the terminal executes different processing methods on the target box.

[0105] The embodiment of the present invention sets clear and rich status identifiers for each box, that is to say, different status identifiers can be set for each box. These status identifiers may include: up, down, left, and right. Among them, up means that the box moves upward in the user interface. For example, the box can move to the top area of the user interface; down means that the box moves downward in the user interface. For example, the box can move to the bottom area of the user interface; left means that the box moves to the left in the user interface. For example, the box can move to the left area of the user interface; right means that the box moves to the right in the user interface. For example, the box can move to the right area of the user interface.

[0106] If the user operation is to press a preset shortcut key, then, according to the correspondence between the preset shortcut key and the processing method, determine the processing method corresponding to the currently pressed preset shortcut key, and process the target box according to this processing method. This processing process may include: updating the status identifier of the target box. For example, if the processing method is to drag and layout the target box to the top area of the user interface, then update the status identifier of the current box to up.

[0107] Moreover, the processing method corresponding to the preset shortcut key may further include the position and size of the target box defined by the user. The terminal can determine the position to which the target box is to be moved and the size of the target box in the user interface by calculating the position and size of the target box. For example, after updating the status identifier of the target box to up, it can be determined to move the target box upward. By calculating the position and size of the target box, it can be determined to which position the target box is to be moved upward, and the target box is displayed at this position according to the calculated size of the target box. It can be seen that by calculating the position and size of the target box, the target box can be reasonably displayed in the user interface with the position and size predefined by the user, and thus the flexible drag-and-drop layout of components can be realized, meeting the personalized needs of users.

[0108] As can be seen from the above description, by setting different processing methods for different shortcut keys, the target box can be dragged and laid out to different areas of the user interface. By displaying the components corresponding to the target box in the target box, the user can flexibly perform component drag-and-drop layout.

[0109] The technical solution provided by the embodiments of the present invention obtains the user operation of the target user on the target box in the user interface. If the user operation is to press a preset shortcut key, according to the processing method corresponding to the preset shortcut key, update the status identifier of the target box to the target status identifier corresponding to the preset shortcut key, and calculate the position and size of the target box; finally, based on the position and size of the target box, drag and layout the target box to the area corresponding to the target status identifier, and display the components corresponding to the target box in the target box. It can be seen that by setting different processing methods for different shortcut keys, the target box can be dragged and laid out to different areas of the user interface, and by calculating the position and size of the target box, the target box can be reasonably displayed in the user interface with the position and size predefined by the user. By displaying the components corresponding to the target box in the target box, the user can flexibly perform component drag-and-drop layout, meeting the personalized needs of users.

[0110] In Figure 2 Based on the shown embodiment, in one implementation, the component drag-and-drop layout method based on front-end interaction, as Figure 3 shown, may further include the following steps:

[0111] S240, if the user operation is a drag operation and a first drag movement event for the edge of the target box is detected, continuously monitor the first drag movement event for the edge of the target box, and calculate and update the size of the target box in real time according to the first drag movement event.

[0112] S250, when a drag end event for the edge of the target box is detected, stop updating the size of the target box.

[0113] S260, based on the updated size of the target box, display the target box in the user interface and display the components corresponding to the target box within the target box.

[0114] Specifically, if the user drags the edge of the current box, the terminal can detect the drag movement event for the edge of the target box, calculate the size of the target box in real time, and stop updating the size of the current box when a mouse release event is detected. Then, based on the updated size of the target box, display the target box in the user interface and display the components corresponding to the target box within the target box.

[0115] It can be seen that through this embodiment, flexible stretching of the box size can be achieved, that is, the size of the components can be flexibly changed, and then flexible dragging and layout of the components can be realized, meeting the personalized needs of users.

[0116] In Figure 2 Based on the embodiment shown, in one embodiment, the method may further include the following steps, namely steps a1 to a4:

[0117] Step a1, if the user operation is a drag operation and a second drag movement event for other areas is detected, continuously monitor the second drag movement event and calculate the first boundary coordinates of the user interface according to the size and layout of the user interface.

[0118] Wherein, the other areas are the areas within the target box except the edge.

[0119] Step a3, during the process of continuously monitoring the second drag movement event, calculate the second boundary coordinates of the target box in real time according to the second drag movement event, compare the second boundary coordinates with the first boundary coordinates in real time, and update the position of the target box in real time.

[0120] Step a4, when the second boundary coordinates are the same as the first boundary coordinates, control the target box to stop moving outside the user interface.

[0121] Specifically, if the user does not perform a drag operation on the edge of the current box, then monitor whether the user performs a drag operation on other areas of the current box except the edge. That is, monitor whether there is a second drag and move event for the target box. If the second drag and move event is detected, then the boundary coordinates of the target box can be calculated in real time. Among them, the boundary coordinates of the target box can include the upper boundary coordinate, lower boundary coordinate, left boundary coordinate, and right boundary coordinate of the target box. For the sake of clear description of the solution, the boundary coordinates of the target box are referred to as the second boundary coordinates. And compare the second boundary coordinates of the target box with the first boundary coordinates of the user interface to determine whether the boundary of the target box exceeds the set boundary during the process of dragging the target box. Among them, the first boundary coordinates of the user interface also include the upper boundary coordinate, lower boundary coordinate, left boundary coordinate, and right boundary coordinate of the target box.

[0122] During the process of dragging the target box, if the second boundary coordinates are the same as the first boundary coordinates, it means that the boundary of the target box is currently located at the set boundary. At this time, control the target box to stop moving outside the user interface, so as to prevent the target box from being dragged outwards continuously and ensure that the target box is within the visible area. For example, during the process of dragging the target box to the left, the abscissa of the left boundary of the target box can be compared with the abscissa of the left boundary of the user interface. If the two abscissas are the same, prevent the target box from being dragged to the left continuously. During the process of dragging the target box to the right, the abscissa of the right boundary of the target box can be compared with the abscissa of the right boundary of the user interface. If the two abscissas are the same, prevent the target box from being dragged to the right continuously. During the process of dragging the target box upwards, the ordinate of the upper boundary of the target box can be compared with the ordinate of the upper boundary of the user interface. If the two ordinates are the same, prevent the target box from being dragged upwards continuously. During the process of dragging the target box downwards, the ordinate of the lower boundary of the target box can be compared with the ordinate of the lower boundary of the user interface. If the two ordinates are the same, prevent the target box from being dragged downwards continuously.

[0123] Moreover, during the process of dragging the target box, in addition to comparing the second boundary coordinates with the first boundary coordinates in real time, the position of the target box is also updated in real time. It can be seen that through this embodiment, the position of the target box can be flexibly changed, that is, the position of the component can be flexibly changed, and then the flexible dragging and layout of the component can be realized, meeting the personalized needs of users.

[0124] Based on the above embodiments, in one embodiment, the method may further include the following steps, namely steps b1 to b3:

[0125] Step b1, record the attribute information of the target box, where the attribute information includes the position and size.

[0126] Step b2: Generate the first JSON data based on the attribute information of the target box.

[0127] Step b3: Send the first JSON data to the server so that the server saves the first JSON data.

[0128] Specifically, through the above embodiments, it is possible to flexibly drag and layout the target box, that is, flexibly change the position and size of the target box. In order to enable the terminal to restore the user interface of the user's last operation when the user enters the user interface next time, the terminal can be based on the attribute information of the target box in real time. In practical applications, the recorded attribute information of the target box can be displayed in the right area of the user interface.

[0129] Then, based on the attribute information such as the position and size of the target box, generate the first JSON data, and send the first JSON data to the server. When the user enters the user interface next time, the terminal can obtain the first JSON data from the server, parse the first JSON data, and render the user interface based on the parsed data, thereby restoring the user interface of the user's last operation.

[0130] Based on the above embodiments, in one implementation manner, the method may further include the following steps, namely steps c1 to c3:

[0131] Step c1: Before obtaining the user operation of the target user on the target box in the user interface, in response to receiving the open instruction of the user interface, determine whether there is a second JSON data of the user interface stored in the server, and the second JSON data is generated based on the user's historical operations on the user interface;

[0132] Step c2: If there is a second JSON data stored in the server, obtain the second JSON data from the server.

[0133] Step c3: Parse the second JSON data and render the user interface based on the attribute information of the target box obtained by parsing.

[0134] Specifically, after receiving the open instruction of the user interface, in order to be able to restore the user interface of the user's last operation, determine whether there is a second JSON data of the user interface stored in the server. If there is a second JSON data of the user interface stored in the server, then it means that the user has historical operations on the user interface and the user interface needs to be restored, that is, restore the user interface of the user's last operation. At this time, the terminal can send a JSON data acquisition request to the server, receive the second JSON data fed back by the server, and render the user interface based on the attribute information of the target box obtained by parsing.

[0135] In practical applications, the attribute information of the target box may include, in addition to the position and size, ID, direction, status flag, type, stretching size range, title, and operable list. This attribute information has been explained in the Figure 1 embodiment shown and will not be elaborated here.

[0136] Based on the above embodiment, in one implementation, parsing the second JSON data and rendering the user interface based on the attribute information of the target box obtained by parsing may include the following steps, namely steps d1 to d4:

[0137] Step d1, traverse each data object in the second JSON data.

[0138] Step d2, for each data object, determine the instance to be created based on the type information corresponding to the data object.

[0139] Step d3, if the instance to be created is the target box, create the target box in the user interface based on the attribute information of the target box in the second JSON data, and set a drag event listening function for the target box.

[0140] Step d4, display the component corresponding to the target box on the target box.

[0141] Specifically, after the terminal obtains the second JSON data, it traverses each data object in the second JSON data. For each data object, the terminal determines the instance to be created according to the type information corresponding to the data object. If the instance to be created is the target box, then, search for the attribute information of the target box from the second JSON data, and create the target box according to the attribute information of the target box. In order to implement the drag layout of the target box, a status flag and a drag event listening function can also be set for the target box. In this way, after the terminal receives a user operation as a preset shortcut key operation or a drag operation, it can implement the drag layout of the target box according to the steps described in the above embodiment.

[0142] Based on the above embodiment, in one implementation, the box in the user interface is set with a hierarchical attribute, and the hierarchical attribute includes a first level and a second level. The priority of the first level is higher than that of the second level. The method may further include the following steps, namely steps e1 to e3:

[0143] Step e1, count the operation frequency of the target user on the target box.

[0144] Step e2, if the operation frequency is greater than the preset frequency, set the level of the target box to the first level.

[0145] Step e3, if the operation frequency is less than the preset frequency, set the level of the target box to the second level.

[0146] Specifically, multiple boxes in the user interface can be used to construct a multi-level layout. Specifically, the levels of multiple boxes can be distinguished, and the boxes with a high user operation frequency can be set as the first level, that is, the boxes with a high user operation frequency are placed at a high level. In this way, it is convenient for the user to operate the boxes at a high level. And, the boxes with a low user operation frequency can be set as the second level, that is, the boxes with a low user operation frequency are placed at a low level. In this way, when the user drags a box at a higher level, the boxes at a lower level will not block the box at a higher level.

[0147] The embodiment of the present invention also provides a component drag-and-drop layout device based on front-end interaction, as Figure 4 shown, the device includes:

[0148] A user operation acquisition module 410, configured to acquire a user operation of a target user on a target box in a user interface, where the user interface includes multiple components, each component corresponds to a box, the target box is any one of the multiple boxes, and the user operation includes pressing a preset shortcut key operation and a drag operation;

[0149] A target box attribute update module 420, configured to, if the user operation is pressing a preset shortcut key operation, update the status identifier of the target box to the target status identifier corresponding to the preset shortcut key according to the processing method corresponding to the preset shortcut key, and calculate the position and size of the target box; different preset shortcut keys correspond to different status identifiers, each status identifier corresponds to an area of the user interface, and the areas corresponding to different status identifiers are different;

[0150] A target box drag-and-drop layout module 430, configured to drag and layout the target box to the area corresponding to the target status identifier based on the position and size of the target box, and display the component corresponding to the target box in the target box.

[0151] For the technical solution provided by the embodiments of the present invention, a user operation of a target user on a target box in a user interface is obtained. If the user operation is a press of a preset shortcut key operation, according to the processing method corresponding to the preset shortcut key, the status identifier of the target box is updated to the target status identifier corresponding to the preset shortcut key, and the position and size of the target box are calculated. Finally, based on the position and size of the target box, the target box is dragged and laid out in the area corresponding to the target status identifier, and the components corresponding to the target box are displayed in the target box. It can be seen that by setting different processing methods for different shortcut keys, the target box can be dragged and laid out in different areas of the user interface. Moreover, by calculating the position and size of the target box, the target box can be reasonably displayed in the user interface at the position and size predefined by the user. By displaying the components corresponding to the target box in the target box, the user can flexibly perform component dragging and layout, meeting the personalized needs of the user.

[0152] Optionally, the device further includes:

[0153] A first drag and move event monitoring module, configured to, if the user operation is a drag operation and a first drag and move event on the edge of the target box is monitored, continuously monitor the first drag and move event on the edge of the target box, and calculate and update the size of the target box in real time according to the first drag and move event;

[0154] A target box size determination module, configured to stop updating the size of the target box when a drag end event on the edge of the target box is monitored;

[0155] The component drag and layout module is further configured to, based on the updated size of the target box, display the target box in the user interface and display the components corresponding to the target box in the target box.

[0156] Optionally, the device further includes:

[0157] A second drag and move event monitoring module, configured to, if the user operation is a drag operation and a second drag and move event on other areas is monitored, continuously monitor the second drag and move event, and calculate the first boundary coordinates of the user interface according to the size and layout of the user interface, where the other areas are the areas inside the target box except the edge;

[0158] A boundary coordinate comparison module, configured to, during the continuous monitoring of the second drag and move event, calculate the second boundary coordinates of the target box in real time according to the second drag and move event, compare the second boundary coordinates with the first boundary coordinates in real time, and update the position of the target box in real time;

[0159] A target box position control module, configured to control the target box to stop moving outside the user interface when the second boundary coordinates are the same as the first boundary coordinates.

[0160] Optionally, the device further includes:

[0161] An attribute information recording module, configured to record the attribute information of the target box, where the attribute information includes the position and size;

[0162] A JSON data generation module, configured to generate first JSON data based on the attribute information of the target box;

[0163] A JSON data sending module, configured to send the first JSON data to a server so that the server saves the first JSON data.

[0164] Optionally, the device further includes:

[0165] A JSON data judgment module, configured to determine whether second JSON data of the user interface is stored in the server in response to receiving an open instruction of the user interface, where the second JSON data is generated based on the user's historical operations on the user interface;

[0166] A JSON data acquisition module, if the second JSON data is stored in the server, acquires the second JSON data from the server;

[0167] A user interface rendering module, configured to parse the second JSON data and render the user interface based on the attribute information of the target box obtained by parsing.

[0168] Optionally, the user interface rendering module is specifically configured to:

[0169] Traverse each data object in the second JSON data;

[0170] For each data object, determine an instance to be created based on the type information corresponding to the data object;

[0171] If the instance to be created is the target box, create the target box in the user interface based on the attribute information of the target box in the second JSON data, and set a status identifier and a drag event listening function for the target box;

[0172] Display the component corresponding to the target box on the target box.

[0173] Optionally, the boxes in the user interface are set with a hierarchical attribute, which includes a first level and a second level, and the priority of the first level is higher than that of the second level. The device further includes:

[0174] An operation frequency statistics module, configured to count the operation frequency of the target user on the target box;

[0175] A first-level setting module, configured to set the level of the target box to the first level if the operation frequency is greater than a preset frequency;

[0176] A second-level setting module, configured to set the level of the target box to the second level if the operation frequency is less than the preset frequency.

[0177] An embodiment of the present invention further provides an electronic device 500, as Figure 5 shown, including:

[0178] At least one processor 501;

[0179] A memory 502 for storing executable instructions of the at least one processor;

[0180] Wherein, the at least one processor is configured to execute the instructions to implement a component drag-and-drop layout method based on front-end interaction.

[0181] The technical solution provided by the embodiment of the present invention obtains a user operation of a target user on a target box in a user interface. If the user operation is a press of a preset shortcut key operation, according to the processing method corresponding to the preset shortcut key, the status identifier of the target box is updated to the target status identifier corresponding to the preset shortcut key, and the position and size of the target box are calculated; finally, based on the position and size of the target box, the target box is dragged and laid out in the area corresponding to the target status identifier, and the component corresponding to the target box is displayed in the target box. It can be seen that by setting different processing methods for different shortcut keys, the target box can be dragged and laid out in different areas of the user interface, and by calculating the position and size of the target box, the target box can be reasonably displayed in the user interface at the position and size predefined by the user. By displaying the component corresponding to the target box in the target box, the user can flexibly perform component drag-and-drop layout, meeting the personalized needs of the user.

[0182] An embodiment of the present invention further provides a computer-readable storage medium, when the instructions in the computer-readable storage medium are executed by a processor of an electronic device, enabling the electronic device to execute a component drag-and-drop layout method based on front-end interaction.

[0183] For the technical solution provided by the embodiment of the present invention, obtain the user operation of the target user on the target box in the user interface. If the user operation is to press the preset shortcut key operation, according to the processing method corresponding to the preset shortcut key, update the status identifier of the target box to the target status identifier corresponding to the preset shortcut key, and calculate the position and size of the target box; finally, based on the position and size of the target box, drag and layout the target box to the area corresponding to the target status identifier, and display the component corresponding to the target box in the target box. It can be seen that by presetting different processing methods corresponding to different shortcut keys, it is possible to drag and layout the target box to different areas of the user interface, and by calculating the position and size of the target box, the target box can be reasonably displayed in the user interface at the position and size predefined by the user. By displaying the component corresponding to the target box in the target box, the user can flexibly perform component drag and layout, meeting the personalized needs of the user.

[0184] Although the embodiments of the present invention have been shown and described above, it can be understood that the above embodiments are exemplary and should not be construed as limiting the present invention. Those of ordinary skill in the art can make changes, modifications, substitutions, and variations to the above embodiments within the scope of the present invention without departing from the principle and spirit of the present invention.

Claims

1. A component drag layout method based on front-end interaction, characterized in that: The method comprises: Obtaining a user operation of a target user on a target box in a user interface, wherein the user interface includes multiple components, each component corresponds to a box, the target box is any box among the multiple boxes, and the user operation includes pressing a preset shortcut key operation and a drag operation; If the user operation is to press a preset shortcut key, according to the preset processing method corresponding to the preset shortcut key, the state identifier of the target box is updated to the target state identifier corresponding to the preset shortcut key, and the position and size of the target box are calculated; different preset shortcut keys correspond to different state identifiers, each state identifier corresponds to an area of ​​the user interface, and different state identifiers correspond to different areas; Based on the position and size of the target box, the target box is dragged and laid out to the area corresponding to the target state identifier, and the components corresponding to the target box are displayed in the target box.

2. The method according to claim 1, characterized in that The method further comprises: If the user operation is a drag operation, and a first drag movement event for the edge of the target box is monitored, the first drag movement event for the edge of the target box is continuously monitored, and according to the first drag movement event, the size of the target box is calculated and updated in real time; When a drag end event for the edge of the target box is monitored, stop updating the size of the target box; Based on the updated size of the target box, the target box is displayed in the user interface, and the components corresponding to the target box are displayed in the target box.

3. The method according to claim 1, characterized in that The method further comprises: If the user operation is a drag operation, and a second drag movement event for other areas is monitored, the second drag movement event is continuously monitored, and the first boundary coordinates of the user interface are calculated according to the size and layout of the user interface, wherein the other areas are areas other than the edges of the target box; In the process of continuously monitoring the second drag and move event, according to the second drag and move event, the second boundary coordinates of the target box are calculated in real time, the second boundary coordinates are compared with the first boundary coordinates in real time, and the position of the target box is updated in real time; When the second boundary coordinates are the same as the first boundary coordinates, the target box is controlled to stop moving to an area outside the user interface.

4. The method according to any one of claims 1 to 3, characterized in that: The method further comprises: Recording attribute information of the target box, wherein the attribute information includes position and size; Generate first JSON data based on the attribute information of the target box; The first JSON data is sent to a server, so that the server saves the first JSON data.

5. The method according to any one of claims 1 to 3, characterized in that: Before obtaining the user operation of the target user on the target box in the user interface, the method further includes: In response to receiving an opening instruction of a user interface, determining whether second JSON data of the user interface is stored in the server, where the second JSON data is generated based on a historical operation of the user on the user interface; If the second JSON data is stored in the server, obtain the second JSON data from the server; The second JSON data is parsed, and the user interface is rendered based on the attribute information of the target box obtained through the parsing.

6. The method according to claim 5, characterized in that The parsing the second JSON data and rendering the user interface based on the attribute information of the target box obtained through the parsing includes: Traverse each data object in the second JSON data; For each data object, determining an instance to be created based on type information corresponding to the data object; If the instance to be created is the target box, based on the attribute information of the target box in the second JSON data, create the target box in the user interface, and set a state flag and a drag event listening function for the target box; The components corresponding to the target box are displayed in the target box.

7. The method according to any one of claims 1 to 3, characterized in that: The box in the user interface is provided with a level attribute, the level attribute includes a first level and a second level, the priority of the first level is higher than the priority of the second level, and the method further includes: Counting the frequency of operations of the target box by the target user; If the operation frequency is greater than a preset frequency, setting the level of the target box to the first level; If the operating frequency is less than the preset frequency, the level of the target box is set to the second level.

8. A component drag layout device based on front-end interaction, characterized in that: The device comprises: A user operation acquisition module, used to acquire a user operation of a target user on a target box in a user interface, wherein the user interface includes multiple components, each component corresponds to a box, and the target box is any box among the multiple boxes, and the user operation includes pressing a preset shortcut key operation and a drag operation; The target box attribute update module is used for, if the user operation is to press a preset shortcut key, updating the state identifier of the target box to the target state identifier corresponding to the preset shortcut key according to the preset processing method corresponding to the preset shortcut key, and calculating the position and size of the target box; different preset shortcut keys correspond to different state identifiers, each state identifier corresponds to an area of ​​the user interface, and different state identifiers correspond to different areas; The component dragging layout module is used to drag and layout the target box to the area corresponding to the target state identifier based on the position and size of the target box, and display the component corresponding to the target box in the target box.

9. An electronic device, characterized in that: include: at least one processor; a memory for storing the at least one processor-executable instruction; The at least one processor is configured to execute the instructions to implement the method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that: When the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the method according to any one of claims 1 to 7.

Images