Method, device, server, medium and product for dynamic adjustment of page layout
By listening to the drag events of the separator component and updating the layout data of the page container in real time, the problem of poor flexibility in page layout adjustment in existing technologies is solved, and dynamic adjustment effects with user interaction support are achieved.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- CHINA UNITED NETWORK COMM GRP CO LTD
- Filing Date
- 2024-12-11
- Publication Date
- 2026-06-19
Smart Images
Figure CN122240099A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer technology, and in particular to a method, apparatus, server, medium and product for dynamically adjusting page layout. Background Technology
[0002] In front-end development, dynamically adjusting the page layout is a common requirement. Currently, existing technologies rely on Cascading Style Sheets (CSS) Flexbox and Grid layout techniques to achieve this adjustment.
[0003] However, Flexbox and Grid layout technologies rely on static CSS definitions and lack support for real-time user interaction, resulting in poor flexibility in adjusting page layout. Summary of the Invention
[0004] The page layout dynamic adjustment method, apparatus, server, medium and product provided in the embodiments of this application are used to improve the flexibility of adjusting page layout.
[0005] In a first aspect, embodiments of this application provide a method for dynamically adjusting page layout, comprising: responding to a user's drag operation on a separator component in a page container, listening to drag events via a listener; wherein, the separator component is located between a first sub-container and a second sub-container in the page container, and the drag operation on the separator component in the page container is used to adjust the size of the first sub-container and the second sub-container in the page container; binding the drag event to the separator component, such that during the drag operation on the separator component in the page container, the following steps are performed: if the first sub-container, the separator component, and the second sub-container in the page container are arranged horizontally, then obtaining the initial width of the first sub-container and the initial width of the second sub-container; upon clicking the separator component... When the separator component is moved, obtain the horizontal coordinate of the clicked position; when the separator component is moved, obtain the horizontal movement distance of the separator component based on the horizontal coordinate of the clicked position; based on the movement direction of the separator component, combined with the horizontal movement distance, the initial width of the first child container, and the initial width of the second child container, obtain the final width of the first child container; based on the movement direction of the separator component, combined with the horizontal movement distance, the initial width of the first child container, and the initial width of the second child container, obtain the final width of the second child container; when the separator component is released, update the final width of the first child container and the final width of the second child container in the layout data of the page container, so that when the page container is reloaded, the page corresponding to the page container is loaded according to the updated layout data.
[0006] In one possible implementation, when moving the separator component, the horizontal movement distance of the separator component is obtained based on the horizontal coordinate of the clicked position, including: obtaining the horizontal coordinate of the current position of the separator component when the movement of the separator component ends; and obtaining the horizontal movement distance of the separator component based on the horizontal coordinate of the current position of the separator component and the horizontal coordinate of the clicked position.
[0007] In one possible implementation, the final width of the first sub-container is obtained based on the moving direction of the divider component, combined with the horizontal moving distance, the initial width of the first sub-container, and the initial width of the second sub-container. This includes: if the moving direction of the divider component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal moving distance is greater than 0, then the final width of the first sub-container is the difference between the initial width of the first sub-container and the horizontal moving distance; if the moving direction of the divider component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal moving distance is greater than 0, then the final width of the first sub-container is the sum of the initial width of the first sub-container and the horizontal moving distance.
[0008] In one possible implementation, the final width of the second sub-container is obtained based on the moving direction of the divider component, combined with the horizontal moving distance, the initial width of the first sub-container, and the initial width of the second sub-container. This includes: if the moving direction of the divider component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal moving distance is greater than 0, then the final width of the second sub-container is the sum of the initial width of the second sub-container and the horizontal moving distance. Similarly, if the moving direction of the divider component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal moving distance is greater than 0, then the final width of the second sub-container is the difference between the initial width of the second sub-container and the horizontal moving distance.
[0009] In one possible implementation, the method further includes: if the moving direction of the divider component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal moving distance is less than or equal to 0, then the final width of the first sub-container is 0, and the final width of the second sub-container is the sum of the initial width of the first sub-container and the initial width of the second sub-container; if the moving direction of the divider component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal moving distance is less than 0, then the final width of the second sub-container is 0, and the final width of the first sub-container is the sum of the initial width of the first sub-container and the initial width of the second sub-container.
[0010] In one possible implementation, the method further includes: if the first sub-container, the separator component, and the second sub-container in the page container are arranged vertically, then obtaining the initial height of the first sub-container and the initial height of the second sub-container; when the separator component is clicked, obtaining the ordinate of the clicked position; when the separator component is moved, obtaining the vertical movement distance of the separator component based on the ordinate of the clicked position; based on the movement direction of the separator component, combined with the vertical movement distance, the initial height of the first sub-container, and the initial height of the second sub-container, obtaining the final height of the first sub-container based on the movement direction of the separator component, combined with the vertical movement distance, the initial height of the first sub-container, and the initial height of the second sub-container; when the separator component is released, updating the final height of the first sub-container and the final height of the second sub-container in the layout data of the page container, so that when the page container is reloaded, the page corresponding to the page container is loaded according to the updated layout data.
[0011] Secondly, embodiments of this application provide a dynamic adjustment device for page layout, comprising:
[0012] The response module is used to respond to the user's drag operation on the divider component in the page container. It listens for drag events through a listener. The divider component is located between the first and second child containers in the page container. The drag operation on the divider component in the page container is used to adjust the size of the first and second child containers in the page container.
[0013] The drag-and-drop module is used to bind drag-and-drop events to the divider component, so that the following steps are executed during the drag-and-drop operation of the divider component in the page container;
[0014] The drag-and-drop module includes:
[0015] The first acquisition unit is used to acquire the initial width of the first sub-container and the initial width of the second sub-container if the first sub-container, the separator component and the second sub-container in the page container are arranged in the horizontal direction.
[0016] The second acquisition unit is used to acquire the horizontal coordinate of the click position when the separator component is clicked;
[0017] The third acquisition unit is used to obtain the horizontal movement distance of the separator component based on the horizontal coordinate of the click position when the separator component is moved.
[0018] The fourth acquisition unit is used to acquire the final width of the first sub-container based on the moving direction of the separator component, combined with the horizontal moving distance, the initial width of the first sub-container, and the initial width of the second sub-container.
[0019] The fifth acquisition unit is used to acquire the final width of the second sub-container based on the moving direction of the separator component, combined with the horizontal moving distance, the initial width of the first sub-container, and the initial width of the second sub-container.
[0020] The update unit is used to update the final width of the first child container and the final width of the second child container into the layout data of the page container when the separator component is released, so that when the page container is reloaded, the page corresponding to the page container is loaded according to the updated layout data.
[0021] Thirdly, embodiments of this application provide a server, including: a memory and a processor;
[0022] The memory stores computer-executed instructions;
[0023] The processor executes computer execution instructions stored in the memory, causing the processor to perform the first aspect and / or various possible implementations of the first aspect as described above.
[0024] Fourthly, embodiments of this application provide a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement the first aspect and / or various possible implementations of the first aspect.
[0025] Fifthly, embodiments of this application provide a computer program product, including a computer program that, when executed by a processor, implements the first aspect and / or various possible implementations of the first aspect.
[0026] The page layout dynamic adjustment method, apparatus, server, medium, and product provided in this application embodiment listen to drag events of separator components and bind these drag events to the separator components. During the drag operation of the separator components in the page container, when the separator components are clicked, the horizontal coordinate of the clicked position is obtained; when the separator components are moved, the horizontal movement position of the separator components is obtained based on the horizontal coordinate of the clicked position, and the final widths of the first and second sub-containers are determined; when the separator components are released, the final widths of the first and second sub-containers are updated in the layout data of the page container. By performing real-time processing when clicking, moving, and releasing the separator components, support for real-time user interaction is provided. When the separator components are released, the layout data of the page container is updated; when the page container is reloaded, the page corresponding to the page container is loaded according to the updated page layout data, achieving responsive dynamic adjustment of the page layout and increasing the flexibility of adjusting the page layout. Attached Figure Description
[0027] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.
[0028] Figure 1 This is a schematic diagram of the server structure provided in an embodiment of this application;
[0029] Figure 2 A flowchart illustrating the dynamic adjustment method for page layout provided in an embodiment of this application;
[0030] Figure 3 A schematic diagram of the structure of the dynamic adjustment device for page layout provided in the embodiments of this application;
[0031] Figure 4 This is a schematic diagram of the hardware structure of the server provided in an embodiment of this application.
[0032] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation
[0033] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.
[0034] Figure 1 This is a schematic diagram of the server structure provided in an embodiment of this application. Figure 1 As shown, the server provided in this embodiment includes: a receiving device 101, a processor 102, and a display device 103.
[0035] It is understood that the structures illustrated in the embodiments of this application do not constitute a specific limitation on the method. In other feasible embodiments of this application, the above architecture may include more or fewer components than illustrated, or combine some components, or split some components, or arrange different components, which can be determined according to the actual application scenario and is not limited here. Figure 1 The components shown can be implemented in hardware, software, or a combination of both.
[0036] In the specific implementation process, the receiving device 101 can be an input / output interface or a communication interface, which can obtain the user's drag operation on the separator component in the page container.
[0037] The processor 102 can process user drag-and-drop operations on the divider component in the page container to update the layout data of the page container.
[0038] The display device 103 can be used to display the updated layout data of the page container.
[0039] The display device can also be a touch screen, used to receive drag operations from the user on the separator component in the page container while displaying the above content.
[0040] It should be understood that the aforementioned processor can be implemented by reading instructions from memory and executing those instructions, or it can be implemented through chip circuitry.
[0041] Furthermore, the network architecture and business scenarios described in the embodiments of this application are for the purpose of more clearly illustrating the technical solutions of the embodiments of this application, and do not constitute a limitation on the technical solutions provided in the embodiments of this application. As those skilled in the art will know, with the evolution of network architecture and the emergence of new business scenarios, the technical solutions provided in the embodiments of this application are also applicable to similar technical problems.
[0042] In front-end development, dynamically adjusting page layout is a common requirement. Currently, existing technologies based on Cascading Style Sheets (CSS) use Flexbox and Grid layout techniques to achieve this. However, Flexbox and Grid layout techniques rely on static CSS definitions and lack support for real-time user interaction, resulting in poor flexibility in adjusting page layout.
[0043] To address the aforementioned technical problems, this application proposes the following technical concept: Due to the lack of support for real-time user interaction, the flexibility of adjusting page layout is poor. The inventors conceived of using a listener to monitor drag events on the separator component and binding these events to the separator component. During the drag operation, real-time processing is performed when the separator component is clicked, moved, or released, providing support for real-time user interaction. When the separator component is released, the layout data of the page container is updated. The drag events on the separator component are monitored using a listener and bound to the separator component. During the drag operation on the separator component within the page container, when the separator component is clicked, the horizontal coordinate of the click position is obtained; when the separator component is moved, the horizontal movement position of the separator component is obtained based on the horizontal coordinate of the click position, and the final widths of the first and second sub-containers are determined; when the separator component is released, the final widths of the first and second sub-containers are updated in the layout data of the page container. By handling clicks, movements, and releases of the separator bar component in real time, support for real-time user interaction is provided. When the separator bar component is released, the layout data of the page container is updated. When the page container is reloaded, the corresponding page is loaded according to the updated page layout data, achieving responsive dynamic adjustment of the page layout and increasing the flexibility of adjusting the page layout.
[0044] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will now be described with reference to the accompanying drawings.
[0045] Figure 2 A flowchart illustrating the dynamic adjustment method for page layout provided in this application embodiment is shown below. Figure 2 As shown, the method includes:
[0046] S201: In response to a user's drag operation on the divider component in the page container, listen for drag events through a listener; wherein, the divider component in the page container is located between the first child container and the second child container, and the drag operation on the divider component in the page container is used to adjust the size of the first child container and the second child container in the page container.
[0047] In this embodiment, users can drag and drop using a mouse or by touching the screen.
[0048] In this embodiment, the drag event includes a click event on the separator component, and the click event on the separator component is bound to a move event on the separator component and a release event on the separator component.
[0049] Alternatively, you can create a touch event handler to listen for drag events. The touch event handler is bound to the `inserted` hook of the Vue directive `drag`. This means that the function will be called when the Vue directive is applied to an element and that element is inserted into the DOM.
[0050] In this embodiment, a global div element is created and styled to cover the entire page view, used to capture drag operations. The div's positioning is set to fixed, and its width and height are set to 100%, so that it covers the entire page view both vertically and horizontally; the div's top is set to 0, aligned with the top of the view, and the div's left is set to 0, aligned with the left side of the view.
[0051] Optionally, set the cursor style to a pointer when the mouse hovers over the div.
[0052] S202: Bind the drag event to the divider component so that the following steps are executed during the drag operation of the divider component in the page container.
[0053] S2021: If the first child container, the separator component, and the second child container in the page container are arranged horizontally, then obtain the initial width of the first child container and the initial width of the second child container.
[0054] In this embodiment, the separator component is bound to a drag event handler function, which is triggered when the separator component is dragged. Both the first and second sub-containers contain a slot, allowing the user to insert custom content. Each slot includes a drag event handler function.
[0055] S2022: When the separator bar component is clicked, get the x-coordinate of the clicked position.
[0056] In this embodiment, when the separator component is clicked, a click event is triggered, the horizontal coordinate of the clicked position is obtained, and this horizontal coordinate is passed to the drag event handling function. Since the first sub-container, the separator component, and the second sub-container are arranged horizontally, the drag event handling function calls the width adjustment function and sets the drag state to true.
[0057] Optionally, the drag state can also be set to true before clicking on the separator component.
[0058] S2023: When moving the divider component, obtain the horizontal movement distance of the divider component based on the horizontal coordinate of the clicked position.
[0059] Specifically, when the separator component finishes moving, obtain the horizontal coordinate of the current position of the separator component; based on the horizontal coordinate of the current position of the separator component and the horizontal coordinate of the clicked position, obtain the horizontal moving distance of the separator component.
[0060] In this embodiment, when the separator component is moved, a move separator component event is triggered, and the difference between the horizontal coordinate of the current position and the horizontal coordinate of the clicked position is determined as the horizontal movement distance of the separator component.
[0061] Optionally, when moving the separator component, it is necessary to prevent the text from being selected during the movement, and to implement debouncing.
[0062] S2024: Based on the moving direction of the separator component, combined with the horizontal moving distance, the initial width of the first sub-container, and the initial width of the second sub-container, obtain the final width of the first sub-container.
[0063] Specifically, the separator component can move in two directions: the direction of the first sub-container and the direction of the second sub-container.
[0064] In this embodiment, if the moving direction of the separator component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal moving distance is greater than 0, then the final width of the first sub-container is the difference between the initial width of the first sub-container and the horizontal moving distance.
[0065] In this embodiment, if the moving direction of the separator component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal moving distance is greater than 0, then the final width of the first sub-container is the sum of the initial width of the first sub-container and the horizontal moving distance.
[0066] S2025: Based on the moving direction of the separator component, combined with the horizontal moving distance, the initial width of the first sub-container, and the initial width of the second sub-container, obtain the final width of the second sub-container.
[0067] Specifically, the separator component can move in two directions: the direction of the first sub-container and the direction of the second sub-container.
[0068] In this embodiment, if the direction of movement of the separator component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal movement distance is greater than 0, then the final width of the second sub-container is the sum of the initial width of the second sub-container and the horizontal movement distance.
[0069] In this embodiment, if the direction of movement of the divider component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal movement distance is greater than 0, then the final width of the second sub-container is the difference between the initial width of the second sub-container and the horizontal movement distance.
[0070] S2026: When the separator component is released, the final width of the first child container and the final width of the second child container are updated in the layout data of the page container, so that when the page container is reloaded, the page corresponding to the page container is loaded according to the updated layout data.
[0071] In this embodiment, when the separator component is released, the drag state is set to false, and the text is restored to the selectable state.
[0072] Optionally, the drag state can be set to false after the divider component is released.
[0073] In summary, by listening for drag events on the divider component and binding these events to the divider component, the following steps are taken during drag operations on the divider component within the page container: When the divider component is clicked, the horizontal coordinate of the clicked position is obtained; when the divider component is moved, its horizontal position is determined based on the horizontal coordinate of the clicked position, and the final widths of the first and second sub-containers are calculated; when the divider component is released, the final widths of the first and second sub-containers are updated in the layout data of the page container. This real-time processing of click, move, and release of the divider component provides support for real-time user interaction. Releasing the divider component updates the layout data of the page container, and reloading the page container according to the updated layout data enables responsive dynamic adjustments to the page layout, increasing the flexibility of page layout adjustments.
[0074] Based on the above embodiments, this embodiment describes the processing procedures when the difference between the initial width of the first sub-container and the horizontal movement distance is less than or equal to 0, and when the difference between the initial width of the second sub-container and the horizontal movement distance is less than or equal to 0. The details are as follows:
[0075] S301: If the direction of movement of the divider component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal movement distance is less than or equal to 0, then the final width of the first sub-container is 0, and the final width of the second sub-container is the sum of the initial width of the first sub-container and the initial width of the second sub-container.
[0076] In this embodiment, when the direction of movement of the separator component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal movement distance is less than or equal to 0, it indicates that the horizontal movement distance is greater than the initial width of the first sub-container. Therefore, the final width of the first sub-container is 0, and the final width of the second sub-container is the sum of the initial width of the first sub-container and the initial width of the second sub-container.
[0077] S302: If the direction of movement of the divider component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal movement distance is less than or equal to 0, then the final width of the second sub-container is 0, and the final width of the first sub-container is the sum of the initial width of the first sub-container and the initial width of the second sub-container.
[0078] In this embodiment, when the direction of movement of the separator component is the direction of the second sub-container, if the difference between the initial width of the second sub-container and the horizontal movement distance is less than or equal to 0, it means that the horizontal movement distance is greater than the initial width of the second sub-container. In this case, the final width of the second sub-container is 0, and the final width of the first sub-container is the sum of the initial width of the first sub-container and the initial width of the second sub-container.
[0079] In summary, the process of moving the divider component takes into account the case where the horizontal movement distance is greater than the initial width of the first child container and the initial width of the second child container. This avoids the situation where the page becomes disordered due to excessive horizontal movement distance, and further improves the flexibility of adjusting the page layout.
[0080] Based on the above embodiments, this embodiment describes the vertical arrangement of the first sub-container, the separator component, and the second sub-container within the page container, as detailed below:
[0081] S401: If the first child container, the separator component, and the second child container in the page container are arranged vertically, then obtain the initial height of the first child container and the initial height of the second child container.
[0082] S402: When the separator bar component is clicked, get the vertical coordinate of the clicked position.
[0083] In this embodiment, when the separator component is clicked, a click event is triggered, the vertical coordinate of the clicked position is obtained, and this vertical coordinate is passed to the drag event handling function. Since the first sub-container, the separator component, and the second sub-container are arranged horizontally, the drag event handling function calls the width adjustment function and sets the drag state to true.
[0084] Optionally, the drag state can also be set to true before clicking on the separator component.
[0085] S403: When moving the divider component, obtain the vertical movement distance of the divider component based on the vertical coordinate of the clicked position.
[0086] Specifically, when the separator component finishes moving, obtain the vertical coordinate of the current position of the separator component; based on the vertical coordinate of the current position of the separator component and the vertical coordinate of the clicked position, obtain the vertical moving distance of the separator component.
[0087] In this embodiment, when the separator component is moved, a move separator component event is triggered, and the difference between the vertical coordinate of the current position and the vertical coordinate of the clicked position is determined as the vertical movement distance of the separator component.
[0088] Optionally, when moving the separator component, it is necessary to prevent the text from being selected during the movement, and to implement debouncing.
[0089] S404: Based on the moving direction of the separator component, combined with the vertical moving distance, the initial height of the first sub-container, and the initial height of the second sub-container, obtain the final height of the first sub-container.
[0090] Specifically, the separator component can move in two directions: the direction of the first sub-container and the direction of the second sub-container.
[0091] In this embodiment, if the direction of movement of the separator component is the direction of the first sub-container, and the difference between the initial height of the first sub-container and the vertical movement distance is greater than 0, then the final width of the first sub-container is the difference between the initial height of the first sub-container and the vertical movement distance.
[0092] In this embodiment, if the direction of movement of the separator component is the direction of the second sub-container, and the difference between the initial height of the second sub-container and the horizontal movement distance is greater than 0, then the final height of the first sub-container is the sum of the initial height of the first sub-container and the vertical movement distance.
[0093] Optionally, if the direction of movement of the divider component is the direction of the first sub-container, and the difference between the initial height of the first sub-container and the vertical movement distance is less than or equal to 0, it means that the vertical movement distance is greater than the initial height of the first sub-container. In this case, the final height of the first sub-container is 0, and the final height of the second sub-container is the sum of the initial heights of the first and second sub-containers.
[0094] Optionally, if the direction of movement of the divider component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal movement distance is less than or equal to 0, it means that the vertical movement distance is greater than the initial height of the second sub-container. In this case, the final height of the second sub-container is 0, and the final height of the first sub-container is the sum of the initial height of the first sub-container and the initial height of the second sub-container.
[0095] S405: Based on the moving direction of the divider component, combined with the vertical moving distance, the initial height of the first sub-container, and the initial height of the second sub-container, obtain the final height of the second sub-container;
[0096] When the separator component is released, the final height of the first child container and the final height of the second child container are updated in the layout data of the page container, so that when the page container is reloaded, the page corresponding to the page container is loaded according to the updated layout data.
[0097] In this embodiment, when the separator component is released, the drag state is set to false, and the text is restored to the selectable state.
[0098] Optionally, the drag state can be set to false after the divider component is released.
[0099] In summary, the case where the first child container, the separator component, and the second child container within the page container are arranged vertically is considered. During dragging the separator component within the page container, when the separator component is clicked, the vertical coordinate of the click position is obtained; when the separator component is moved, its vertical movement position is obtained based on the vertical coordinate of the click position, and the final heights of the first and second child containers are determined; when the separator component is released, the final heights of the first and second child containers are updated in the page container's layout data. By performing real-time processing during the clicking, moving, and releasing of the separator component, support for real-time user interaction is provided. When the separator component is released, the page container's layout data is updated; when the page container is reloaded, the corresponding page is loaded according to the updated page layout data, achieving responsive dynamic adjustment of the page layout and increasing the flexibility of adjusting the page layout.
[0100] Figure 3 A schematic diagram of the structure of the dynamic adjustment device for page layout provided in the embodiments of this application is shown below. Figure 3 As shown, the dynamic adjustment device for page layout provided in this embodiment includes a response module 301 and a drag-and-drop module 302. The drag-and-drop module 302 includes a first acquisition unit 3021, a second acquisition unit 3022, a third acquisition unit 3023, a fourth acquisition unit 3024, a fifth acquisition unit 3025, and an update unit 3026.
[0101] The response module 301 is used to respond to the user's drag operation on the separator component in the page container, and listens for the drag event through a listener; wherein, the separator component in the page container is located between the first sub-container and the second sub-container, and the drag operation on the separator component in the page container is used to adjust the size of the first sub-container and the second sub-container in the page container.
[0102] The drag-and-drop module 302 is used to bind drag-and-drop events to the divider component, so that the following steps are executed during the drag-and-drop operation of the divider component in the page container;
[0103] The drag-and-drop module 302 includes:
[0104] The first acquisition unit 3021 is used to acquire the initial width of the first sub-container and the initial width of the second sub-container if the first sub-container, the separator component and the second sub-container in the page container are arranged in the horizontal direction.
[0105] The second acquisition unit 3022 is used to acquire the horizontal coordinate of the click position when the separator component is clicked;
[0106] The third acquisition unit 3023 is used to acquire the horizontal movement distance of the separator component based on the horizontal coordinate of the clicked position when the separator component is moved.
[0107] The fourth acquisition unit 3024 is used to acquire the final width of the first sub-container based on the moving direction of the separator component, combined with the horizontal moving distance, the initial width of the first sub-container, and the initial width of the second sub-container.
[0108] The fifth acquisition unit 3025 is used to acquire the final width of the second sub-container based on the moving direction of the separator component, combined with the horizontal moving distance, the initial width of the first sub-container, and the initial width of the second sub-container.
[0109] The update unit 3026 is used to update the final width of the first child container and the final width of the second child container into the layout data of the page container when the separator component is released, so that when the page container is reloaded, the page corresponding to the page container is loaded according to the updated layout data.
[0110] In one possible implementation, the third acquisition unit 3023 is specifically used to: acquire the horizontal coordinate of the current position of the separator component when the movement of the separator component ends; and acquire the horizontal movement distance of the separator component based on the horizontal coordinate of the current position of the separator component and the horizontal coordinate of the clicked position.
[0111] In one possible implementation, the fourth acquisition unit 3024 is specifically used for: if the moving direction of the separator component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal moving distance is greater than 0, then the final width of the first sub-container is the difference between the initial width of the first sub-container and the horizontal moving distance; if the moving direction of the separator component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal moving distance is greater than 0, then the final width of the first sub-container is the sum of the initial width of the first sub-container and the horizontal moving distance.
[0112] In one possible implementation, the fifth acquisition unit 3025 is specifically configured to: if the moving direction of the divider component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal moving distance is greater than 0, then the final width of the second sub-container is the sum of the initial width of the second sub-container and the horizontal moving distance. If the moving direction of the divider component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal moving distance is greater than 0, then the final width of the second sub-container is the difference between the initial width of the second sub-container and the horizontal moving distance.
[0113] In one possible implementation, the dynamic adjustment device for the page layout further includes: a first judgment module, configured to: if the moving direction of the separator component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal moving distance is less than or equal to 0, then the final width of the first sub-container is 0, and the final width of the second sub-container is the sum of the initial width of the first sub-container and the initial width of the second sub-container; if the moving direction of the separator component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal moving distance is less than 0, then the final width of the second sub-container is 0, and the final width of the first sub-container is the sum of the initial width of the first sub-container and the initial width of the second sub-container.
[0114] In one possible implementation, the dynamic adjustment device for the page layout further includes: a second judgment module, configured to: if the first sub-container, the separator component, and the second sub-container in the page container are arranged vertically, obtain the initial height of the first sub-container and the initial height of the second sub-container; when the separator component is clicked, obtain the vertical coordinate of the clicked position; when the separator component is moved, obtain the vertical movement distance of the separator component based on the vertical coordinate of the clicked position; based on the movement direction of the separator component, combined with the vertical movement distance, the initial height of the first sub-container, and the initial height of the second sub-container, obtain the final height of the first sub-container based on the movement direction of the separator component, combined with the vertical movement distance, the initial height of the first sub-container, and the initial height of the second sub-container; when the separator component is released, update the final height of the first sub-container and the final height of the second sub-container in the layout data of the page container, so that when the page container is reloaded, the page corresponding to the page container is loaded according to the updated layout data.
[0115] The dynamic adjustment device for page layout provided in this embodiment can execute the method provided in the above method embodiment. Its implementation principle and technical effect are similar, and will not be described in detail here.
[0116] Figure 4 This is a schematic diagram of the hardware structure of the server provided in an embodiment of this application. Figure 4As shown, the server provided in this embodiment includes at least one processor 401 and a memory 402. Optionally, the server also includes a communication component 403. The processor 401, memory 402, and communication component 403 are connected via a bus 404.
[0117] In a specific implementation, at least one processor 401 executes computer execution instructions stored in memory 402, causing at least one processor 401 to perform the above-described method.
[0118] The specific implementation process of processor 401 can be found in the above method embodiments, and its implementation principle and technical effect are similar. It will not be repeated here.
[0119] In the above embodiments, it should be understood that the processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), etc. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in this invention can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules within the processor.
[0120] The memory may include random access memory (RAM) and may also include non-volatile memory (NVM), such as at least one disk storage device.
[0121] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, the buses shown in the accompanying drawings are not limited to a single bus or a single type of bus.
[0122] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the above-described method.
[0123] This application also provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the above-described method.
[0124] The aforementioned readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk. The readable storage medium can be any available medium accessible to a general-purpose or special-purpose computer.
[0125] An exemplary readable storage medium is coupled to a processor, enabling the processor to read information from and write information to the readable storage medium. Of course, the readable storage medium can also be a component of the processor. The processor and the readable storage medium can reside in an Application Specific Integrated Circuit (ASIC). Alternatively, the processor and the readable storage medium can exist as discrete components in the device.
[0126] The division of units is merely a logical functional division; in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be indirect coupling or communication connection through some interfaces, devices, or units, and may be electrical, mechanical, or other forms.
[0127] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.
[0128] In addition, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.
[0129] If a function is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.
[0130] Those skilled in the art will understand that all or part of the steps of the above-described method embodiments can be implemented by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When executed, the program performs the steps of the above-described method embodiments; and the aforementioned storage medium includes various media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks.
[0131] Finally, it should be noted that other embodiments of the invention will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This invention is intended to cover any variations, uses, or adaptations of the invention that follow the general principles of the invention and include common knowledge or customary techniques in the art not disclosed herein, and is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of the invention is limited only by the appended claims.
Claims
1. A method for dynamic adjustment of page layout, characterized in that, The application is applied to a server, comprising: In response to a user's drag operation on a separator component in a page container, a listener listens to a drag event; wherein the separator component is located between a first sub-container and a second sub-container in the page container, and the drag operation on the separator component in the page container is used to adjust the size of the first sub-container and the second sub-container in the page container; The drag event is bound to the separator component, so that the following steps are performed during the drag operation on the separator component in the page container: If the first sub-container, the separator component and the second sub-container in the page container are arranged in a horizontal direction, the initial width of the first sub-container and the initial width of the second sub-container are obtained; When the separator component is clicked, the horizontal coordinate of the click position is obtained; When the separator component is moved, the horizontal moving distance of the separator component is obtained according to the horizontal coordinate of the click position; According to the moving direction of the separator component, the final width of the first sub-container is obtained in combination with the horizontal moving distance, the initial width of the first sub-container and the initial width of the second sub-container; According to the moving direction of the separator component, the final width of the second sub-container is obtained in combination with the horizontal moving distance, the initial width of the first sub-container and the initial width of the second sub-container; When the separator component is released, the final width of the first sub-container and the final width of the second sub-container are updated to the layout data of the page container, so that the page corresponding to the page container is loaded according to the updated layout data when the page container is reloaded.
2. The method of claim 1, wherein, When the separator component is moved, the horizontal moving distance of the separator component is obtained according to the horizontal coordinate of the click position, comprising: When the separator component is moved, the horizontal moving distance of the separator component is obtained according to the horizontal coordinate of the click position, comprising: When the separator component is moved, the horizontal moving distance of the separator component is obtained according to the horizontal coordinate of the click position, comprising:
3. The method of claim 1, wherein, If the moving direction of the separator component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal moving distance is greater than 0, the final width of the first sub-container is the difference between the initial width of the first sub-container and the horizontal moving distance; If the moving direction of the separator component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal moving distance is greater than 0, the final width of the first sub-container is the sum of the initial width of the first sub-container and the horizontal moving distance. If the moving direction of the separator component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal moving distance is greater than 0, the final width of the first sub-container is the sum of the initial width of the first sub-container and the horizontal moving distance.
4. The method of claim 1, wherein, If the direction of movement of the separator component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal movement distance is greater than 0, then the final width of the second sub-container is the sum of the initial width of the second sub-container and the horizontal movement distance. If the direction of movement of the separator component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal movement distance is greater than 0, then the final width of the second sub-container is the difference between the initial width of the second sub-container and the horizontal movement distance.
5. The method according to any one of claims 1 to 4, characterized in that, Also includes: If the direction of movement of the separator component is the direction of the first sub-container, and the difference between the initial width of the first sub-container and the horizontal movement distance is less than or equal to 0, then the final width of the first sub-container is 0, and the final width of the second sub-container is the sum of the initial width of the first sub-container and the initial width of the second sub-container. If the direction of movement of the separator component is the direction of the second sub-container, and the difference between the initial width of the second sub-container and the horizontal movement distance is less than or equal to 0, then the final width of the second sub-container is 0, and the final width of the first sub-container is the sum of the initial width of the first sub-container and the initial width of the second sub-container.
6. The method according to any one of claims 1 to 4, characterized in that, Also includes: If the first sub-container, the separator component, and the second sub-container in the page container are arranged vertically, then the initial height of the first sub-container and the initial height of the second sub-container are obtained. When the separator component is clicked, the vertical coordinate of the clicked position is obtained; When moving the separator component, the vertical movement distance of the separator component is obtained based on the vertical coordinate of the clicked position; Based on the moving direction of the separator component, combined with the vertical moving distance, the initial height of the first sub-container, and the initial height of the second sub-container, the final height of the first sub-container is obtained; Based on the moving direction of the separator component, combined with the vertical moving distance, the initial height of the first sub-container, and the initial height of the second sub-container, the final height of the second sub-container is obtained; When the separator component is released, the final height of the first sub-container and the final height of the second sub-container are updated in the layout data of the page container, so that when the page container is reloaded, the page corresponding to the page container is loaded according to the updated layout data.
7. An apparatus for dynamic adjustment of page layout, characterized by Applied to servers, including: The response module is used to respond to the user's drag operation on the separator component in the page container, and listens for drag events through a listener; wherein, the separator component in the page container is located between the first sub-container and the second sub-container, and the drag operation on the separator component in the page container is used to adjust the size of the first sub-container and the second sub-container in the page container. The drag-and-drop module is used to bind the drag-and-drop event to the separator component, so that the following steps are executed during the drag-and-drop operation of the separator component in the page container; The drag-and-drop module includes: The first acquisition unit is configured to acquire the initial width of the first sub-container and the initial width of the second sub-container if the first sub-container, the separator component, and the second sub-container in the page container are arranged in the horizontal direction. The second acquisition unit is used to acquire the horizontal coordinate of the click position when the separator component is clicked; The third acquisition unit is used to acquire the horizontal movement distance of the separator component based on the horizontal coordinate of the click position when the separator component is moved. The fourth acquisition unit is used to acquire the final width of the first sub-container based on the moving direction of the separator component, combined with the horizontal moving distance, the initial width of the first sub-container, and the initial width of the second sub-container; The fifth acquisition unit is used to acquire the final width of the second sub-container based on the moving direction of the separator component, combined with the horizontal moving distance, the initial width of the first sub-container, and the initial width of the second sub-container; The update unit is used to update the final width of the first sub-container and the final width of the second sub-container to the layout data of the page container when the separator component is released, so that when the page container is reloaded, the page corresponding to the page container is loaded according to the updated layout data.
8. A server, characterized by include: Memory, processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory, causing the processor to perform the method as described in any one of claims 1-6.
9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in any one of claims 1-6.
10. A computer program product, characterised in that, Includes a computer program that, when executed by a processor, implements the method described in any one of claims 1-6.