CN117519882A

CN117519882A - Page layout adjustment method and device and processing equipment

Info

Publication number: CN117519882A
Application number: CN202311573626.7A
Authority: CN
Inventors: 梁俊杰; 王俊人; 王海涛
Original assignee: Wuhan Wind Gather Intelligence Technology Co ltd
Current assignee: Wuhan Wind Gather Intelligence Technology Co ltd
Priority date: 2023-11-23
Filing date: 2023-11-23
Publication date: 2024-02-06

Abstract

The application provides a method, a device and a processing device for adjusting page layout, which are used for receiving drag operation of target page areas in different page areas in a target page, then performing position self-adaptive adjustment in the target page so that the different page areas are completely displayed on the target page, therefore, the user can flexibly adjust the display position of any page area, automatically reform the layout through position self-adaption adjustment, realize convenient and intelligent page layout adjustment effect, meet the deeper personalized requirements of the user on the page layout, and obviously improve the user experience.

Description

Page layout adjustment method and device and processing equipment

Technical Field

The present disclosure relates to the field of page layout design, and in particular, to a method and an apparatus for adjusting a page layout, and a processing device.

Background

For product development, the design work of a page (interface) of a browser and an Application (APP) can be involved, and the page often contains a plurality of display elements and is presented at a pre-designed display position, so that page contents are presented to a user under a planned page layout design scheme.

With the development of technology, in order to better use experience of users and meet personalized requirements of users, page layout settings can be provided for users in newer page layout design schemes, so that the users can adjust the layout of display elements in pages according to own preference.

However, the inventor of the application found that, although the display positions of different display elements can be adjusted by the user, the display position layout for displaying the display elements in the page is fixed, so that the requirement of the user for deeper personalization of the page layout cannot be met, and the improvement of the user experience is relatively limited.

Disclosure of Invention

The application provides a page layout adjusting method, device and processing equipment, which are used for receiving the drag operation of target page areas in different page areas in a target page, and then performing position self-adaptive adjustment in the target page, so that the different page areas are completely displayed on the target page, a user can flexibly adjust the display position of any page area, and automatically reform the layout through the position self-adaptive adjustment, thereby realizing a convenient and intelligent page layout adjusting effect, meeting the deeper personalized requirements of the user on the page layout, and obviously improving the user experience.

In a first aspect, the present application provides a method for adjusting a page layout, where the method includes:

displaying a target page comprising different page areas in a display screen, wherein each page area is used for displaying corresponding page content;

receiving a drag operation of a target page area in the target page aiming at different page areas, and adjusting the target page area from a starting position to a target position along with the drag operation;

in the target page, combining the target position and the target area boundary of the current target page area, combining the position and the area boundary of the page areas except the target page area in different page areas, and combining the area boundary of the target page, carrying out position self-adaptive adjustment on the page areas except the target page area in different page areas, so that the different page areas are completely displayed on the target page.

With reference to the first aspect of the present application, in a first possible implementation manner of the first aspect of the present application, the method further includes: receiving an area size adjustment operation aiming at an area of a target page in the target page, and adjusting the area of the target page from the original area size to the target area size along with the area size adjustment operation;

In the target page, combining the target position, the target region boundary and the target region size of the current target page region, combining the position, the region boundary and the region size of the page regions except the target page region in different page regions, and combining the region boundary of the target page, and performing position self-adaptive adjustment on the page regions except the target page region in different page regions, so that the different page regions are completely displayed on the target page.

With reference to the first aspect of the present application, in a second possible implementation manner of the first aspect of the present application, receiving a drag operation for a target page area in different page areas in the target page, and adjusting the target page area from a starting position to a target position along with the drag operation, including:

receiving setting operations aiming at target page areas in different page areas in a target page, and adjusting the target page area from a starting position to a target position along with a dragging operation contained in the setting operations and adjusting the target page area from an original area size to a target area size along with an area size adjusting operation contained in the setting operations;

in the target page, combining the target position and the target area boundary of the current target page area, combining the position and the area boundary of the page areas except the target page area in different page areas, and combining the area boundary of the target page, performing position self-adaptive adjustment on the page areas except the target page area in different page areas, so that the different page areas are completely displayed in the target page, and the method comprises the following steps:

With reference to the first aspect of the present application or the second possible implementation manner, in a third possible implementation manner of the first aspect of the present application, the adaptive adjustment of the position is performed based on a pitch alignment principle and with a minimum adjustment range of the position as a constraint.

With reference to the first aspect of the present application, in a fourth possible implementation manner of the first aspect of the present application, before the displaying, in the display screen, a target page including different page areas, the method further includes:

and configuring different page areas for display on the target page, and adding information of the different page areas including the drag attribute and the drag event to respond to the subsequent position adaptive adjustment processing.

In a second aspect, the present application provides an adjustment apparatus for page layout, including:

The display unit is used for displaying the target page comprising different page areas in the display screen, wherein each page area is used for displaying corresponding page content;

a receiving unit for receiving a drag operation for a target page area among different page areas in a target page, and adjusting the target page area from a start position to a target position along with the drag operation;

the adjusting unit is used for combining the target position and the target area boundary of the current target page area, combining the position and the area boundary of the page areas except the target page area in different page areas and combining the area boundary of the target page, and carrying out position self-adaptive adjustment on the page areas except the target page area in different page areas so that the different page areas are completely displayed on the target page.

With reference to the second aspect of the present application, in a first possible implementation manner of the second aspect of the present application, the receiving unit is further configured to:

receiving an area size adjustment operation aiming at an area of a target page in the target page, and adjusting the area of the target page from the original area size to the target area size along with the area size adjustment operation;

The adjusting unit is also used for:

With reference to the second aspect of the present application, in a second possible implementation manner of the second aspect of the present application, the receiving unit is specifically configured to:

the adjusting unit is specifically used for:

With reference to the first or second possible implementation manner of the second aspect of the present application, in a third possible implementation manner of the second aspect of the present application, the adaptive adjustment of the position is performed based on a pitch alignment principle and with a minimum adjustment range as a constraint.

With reference to the second aspect of the present application, in a fourth possible implementation manner of the second aspect of the present application, the apparatus further includes a configuration unit, configured to:

In a third aspect, the present application provides a processing device, comprising a processor and a memory, the memory having stored therein a computer program, the processor executing the method provided by the first aspect of the present application or any one of the possible implementations of the first aspect of the present application when calling the computer program in the memory.

In a fourth aspect, the present application provides a computer readable storage medium storing a plurality of instructions adapted to be loaded by a processor to perform the method provided in the first aspect of the present application or any one of the possible implementations of the first aspect of the present application.

From the above, the present application has the following advantages:

for the page layout setting of the user side, after the drag operation of the target page area in the target page aiming at different page areas is received, combining the target position and the target area boundary of the current target page area in the target page, combining the position and the area boundary of the page area except the target page area in different page areas and combining the area boundary of the target page, carrying out position self-adaptive adjustment on the page area except the target page area in different page areas, so that the different page areas are completely displayed on the target page, and thus, the user can flexibly adjust the display position of any page area, and automatically reform the layout through the position self-adaptive adjustment, thereby realizing a convenient and intelligent page layout adjustment effect, meeting the personalized requirements of the user on deeper layers of the page layout, and obviously improving the use experience of the user.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the description of the embodiments will be briefly introduced below, it being obvious that the drawings in the following description are only some embodiments of the present application, and that other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 is a schematic flow chart of a method for adjusting a page layout of the present application;

FIG. 2 is a schematic structural diagram of an adjusting device for page layout of the present application;

fig. 3 is a schematic structural view of the processing apparatus of the present application.

Detailed Description

The following description of the embodiments of the present application will be made clearly and fully with reference to the accompanying drawings, in which it is evident that the embodiments described are only some, but not all, of the embodiments of the present application. All other embodiments, which can be made by those skilled in the art based on the embodiments herein without making any inventive effort, are intended to be within the scope of the present application.

The terms first, second and the like in the description and in the claims of the present application and in the above-described figures, are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate such that the embodiments described herein may be implemented in other sequences than those illustrated or otherwise described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or modules is not necessarily limited to those steps or modules that are expressly listed or inherent to such process, method, article, or apparatus. The naming or numbering of the steps in the present application does not mean that the steps in the method flow must be executed according to the time/logic sequence indicated by the naming or numbering, and the execution sequence of the steps in the flow that are named or numbered may be changed according to the technical purpose to be achieved, so long as the same or similar technical effects can be achieved.

The division of the modules in the present application is a logical division, and may be implemented in another manner in practical application, for example, a plurality of modules may be combined or integrated in another system, or some features may be omitted or not implemented, and in addition, coupling or direct coupling or communication connection between the modules that are shown or discussed may be through some interfaces, and indirect coupling or communication connection between the modules may be in an electrical or other similar form, which is not limited in this application. The modules or sub-modules described as separate components may or may not be physically separate, or may be distributed in a plurality of circuit modules, and some or all of the modules may be selected according to actual needs to achieve the purposes of the present application.

Before describing the page layout adjustment method provided in the present application, the background content related to the present application is first described.

The page layout adjustment method, the page layout adjustment device and the computer readable storage medium can be applied to processing equipment, and are used for receiving the drag operation of the target page areas in different page areas in the target page, and then performing position self-adaptive adjustment in the target page, so that the different page areas are completely displayed on the target page, a user can flexibly adjust the display position of any page area, and automatically reform the layout through the position self-adaptive adjustment, thereby realizing a convenient and intelligent page layout adjustment effect, meeting the deeper personalized requirements of the user on the page layout, and remarkably improving the user experience.

In the method for adjusting the page layout, the execution body may be a device for adjusting the page layout, or a server, a physical host, or a User Equipment (UE) integrated with the device for adjusting the page layout. The page layout adjusting device can be realized in a hardware or software mode, the UE can be specifically a terminal device such as a smart phone, a tablet computer, a notebook computer, a desktop computer or a personal digital assistant (Personal Digital Assistant, PDA), and the processing device can be set in a device cluster mode.

It can be understood that, in a specific application, as long as the function service of displaying the page is involved, the page layout adjustment method provided by the application can be applied to implement the corresponding page layout adjustment function, so that the processing device of the application service (configured in the form of a control, an APP, etc.) carrying the page layout adjustment method provided by the application is flexible, and the specific device type and the device deployment form are not particularly limited.

Next, a method for adjusting a page layout provided in the present application will be described.

First, referring to fig. 1, fig. 1 shows a flow chart of a method for adjusting a page layout of the present application, and the method for adjusting a page layout provided in the present application may specifically include steps S101 to S103 as follows:

step S101, displaying a target page comprising different page areas in a display screen, wherein each page area is used for displaying corresponding page content;

it can be understood that the present application is directed to a page area capable of adjusting a position in a displayed page, but this is not to say that all page areas in the page can be adjusted in position, whether a page area in the page can be adjusted in position is generally adjusted according to specific settings, for example, whether permission of whether the position can be adjusted is set, and for example, an attribute capable of adjusting the position is added.

Thus, the current page may also include some page areas that cannot be currently adjusted, but these page areas that cannot be currently adjusted are not included in the category of the different page areas mentioned in step S101, where the different page areas mentioned in step S101 themselves refer to page areas that can be adjusted in position in the page.

The page displayed (displayed) in the display screen is currently aimed at, and for convenience of explanation, the page is recorded as a target page, and the page can be specifically a page in different forms such as a Web service webpage opened in a browser, an interface of the browser, a Web service webpage opened in an APP, an interface of the APP and the like.

In addition, for the display screen for displaying the target page here, the display screen can also be a touch screen with a touch function, which can not only belong to the processing equipment for executing the application scheme, but also can be equipment outside the processing equipment, such as an external display screen, and also can be a display screen contained in other equipment, so that the display screen is more flexible.

Step S102, receiving a drag operation of a target page area in target pages aiming at different page areas, and adjusting the target page area from a starting position to a target position along with the drag operation;

it can be understood that, when the target page is presented to the user, the user can select and initiate a corresponding drag operation for the target page area to be adjusted according to the individual requirements of the user and the target page area to be adjusted, and drag the target page area from the initial position to the target position.

For example, the user can click and press the target page area on the screen by a finger through a touch operation on the touch screen, after the system successfully identifies the user, the display effect of the target page area can be adjusted to be a pull-up effect (suspension effect), the user can continue the drag operation on the screen until the target position, and after the finger is released from the screen, the drag operation on the target page area can be completed once.

For example, the user can move the mouse pointer to the target page area in the interface through the processing device or the external mouse device, and press the mouse for a long time to achieve the purpose of selecting the target page area, after the system successfully identifies the user, the display effect of the target page area can be adjusted to be a pull-up effect (suspension effect), the user can continue to move the mouse pointer in the interface at this time to drag until the target position, and after the mouse button is released, the drag operation for the target page area can be completed once.

It can be appreciated that the dragging operation referred to in step S102 is flexible, and may be set by referring to a scheme of file dragging and window dragging in the conventional technology, so that a specific description will not be expanded in this application.

It can be understood that the page area referred to in the application is a rectangle (including square) or a display element similar to the rectangle, and when dragging, the display effect of "card" can be displayed, so that the page card adjustment scheme or the magnetic card scheme can be used for understanding the scheme in the application.

Step S103, in the target page, combining the target position and the target area boundary of the current target page area, combining the position and the area boundary of the page areas except the target page area in different page areas, and combining the area boundary of the target page, performing position self-adaptive adjustment on the page areas except the target page area in different page areas, so that the different page areas are completely displayed on the target page.

After a drag operation for the target page area is successfully executed, it is easy to understand that the corresponding target position can be obtained, and the specific position of the area boundary of the target page area is determined by combining the area boundary size of the target page area.

On the other hand, the positions of other page areas in the target page and the area boundary sizes of the other page areas in the target page can be determined in the same manner, and the specific positions of the other page areas in the target page can be determined.

At this time, after the target page area adjusts the position of the target page and is located at the target position, the application can refer to the information of the two aspects, automatically adjust the positions of other page areas under the constraint of the area boundary of the target page, recalculate the layout of all page areas, realize the self-adaptive display of all page areas, enable all page areas in the target page to be orderly arranged and full of the whole page and not overlap, and simultaneously keep the proper spacing between the page areas, thereby completing one-time position self-adaptive adjustment, conveniently and intelligently completing the adjustment of the whole page layout by using the position adjustment operation of the user on the target page area as the trigger, and meeting the individual requirements of the user.

As can be seen from the embodiment shown in fig. 1, for the page layout setting on the user side, after receiving the drag operation for the target page area in different page areas in the target page, the present application combines the target position and the target area boundary of the target page area in the target page, and combines the position and the area boundary of the page area except the target page area in the different page areas, and combines the area boundary of the target page, so as to perform the position adaptive adjustment on the page area except the target page area in the different page areas, so that the different page areas are completely displayed on the target page, and thus, the user can flexibly adjust the display position of any page area, and automatically reform the layout through the position adaptive adjustment, thereby realizing the convenient and intelligent page layout adjustment effect, meeting the deeper personalized requirements of the user on the page layout, and significantly improving the user experience.

In addition, it should be noted that, for the position of the presented page area, the position of the presented page area is not fixed, but the position of other page areas can be re-planned from the whole layer after each time based on the position adjustment of the user on the target page area, instead of simply adjusting the position of the page area of the local area in a mode of covering, squeezing or inserting the page area originally belonging to the current target position of the target page area, so that better user-defined layout design effect can be achieved, and better user experience can be brought.

The steps of the embodiment shown in fig. 1 and the possible implementation thereof in practical applications will be described in detail.

The scheme of the application can be applied to scenes such as sales scenes, data analysis scenes and the like in actual situations.

For example, a sales team can create a sales large screen in an office through the scheme of the application, and can rearrange the presented different page areas according to different business requirements so as to accurately track information such as achievement of a sales target, customer calling and the like and monitor real-time sales target and customer interaction;

for another example, the e-commerce manager can create a custom e-commerce dashboard through the scheme of the application to display information such as real-time sales data, inventory status, customer feedback and the like, and dynamically layout and display specific sales conditions according to the content such as the real-time sales data, inventory status, sales promotion information and the like.

For example, a data analyst can create a dedicated dashboard by the scheme of the application so as to flexibly display data such as sales trends, customer feedback, advertisement effects and the like in different date ranges, and the display effect is more visual.

For another example, the news edit can create a dedicated news edit workstation by the scheme of the application so as to view real-time information, social media trends and the like of different news sources, and the news edit has more visual display effect.

Therefore, under different application scenes, highly customized user experience can be provided through the scheme, users are allowed to freely arrange and configure page layout so as to meet specific requirements of the users, the method and the device are very useful for the application scenes needing to dynamically adjust content display, and understanding and interaction of the users on presented information can be improved.

In addition, it should be understood that in the prior art, the adjustment of the page layout is also only aimed at the position of the page area (display element), and in the further optimization design, the adjustment of the size of the page area is also considered, so that the position of the target page area can be adjusted, the size of the target page area can be adjusted, the position and the size of the target page area can be adjusted at the same time, the user-defined layout design concept is further deepened, and the deeper personalized requirements of the user are met.

For example, the method for adjusting the page layout of the present application may further include:

It can be clearly seen that in the setting, two factors of position and size are comprehensively considered, so that the high-precision pose self-adaptive adjustment is performed on the page areas except the target page area in the target page.

Alternatively, in yet another exemplary implementation, the drag operation in step S102 is not an independent operation, and in terms of system identification, a setting operation involving both drag for position and adjustment for size may be configured, so that the adjustment of the target page area in position and in size may be adjusted simultaneously, and thus trigger global position-adaptive adjustment.

Specifically, step S102 receives a drag operation for a target page area in different page areas in the target page, and adjusts the target page area from a start position to a target position along with the drag operation, which may include:

And receiving setting operations aiming at target page areas in different page areas in the target page, and adjusting the target page area from a starting position to a target position along with a dragging operation included in the setting operations and adjusting the target page area from an original area size to a target area size along with an area size adjusting operation included in the setting operations.

Correspondingly, in the target page, step S103 combines the target position and the target region boundary of the current target page region, and combines the position and the region boundary of the page region except the target page region in the different page regions, and combines the region boundary of the target page, to perform position adaptive adjustment on the page region except the target page region in the different page regions, so that the different page regions are completely displayed in the target page, and may include:

It will be appreciated that in this setting, the setting operation includes both a dynamic drag operation (which necessarily involves a drag operation of the user), and an area size adjustment operation that may be dynamic or static, for example, if dynamic, the user needs to dynamically adjust the size of the target page area by using a drag operation in different manners such as a previous touch operation or a mouse pointer, and, for example, if static, information about a size aspect such as a size proportion and a size dimension that is desired to be adjusted may be directly input, so that the size of the target page area may be adjusted by one key, and a specific information input manner adopted in the link is more flexible.

After the consideration of the area size is introduced, it can be understood that in the process of performing the position adaptive adjustment, the automatic adjustment of the area size of the page area may be involved, for example, if an excessive blank area appears, the target page area of the previous round may be preferentially enlarged, and for example, the page area with a higher weight or a larger number of selected target page areas may be preferentially enlarged.

Meanwhile, the position self-adaptive adjustment triggered after the target page area is adjusted can be configured with a corresponding adjustment strategy in advance, and as a further practical implementation mode, the following strategy contents can be configured:

The position adaptive adjustment is performed based on a pitch alignment principle (uniform pitch) and constrained by a minimum position adjustment range (different quantization schemes corresponding to the shortest adjustment distance may be involved).

In the processing procedure of the position self-adaptive adjustment, starting with the page area with overlapping relation with the target page area, quantifying the relation from near to far according to the adjacent distance or the number of the adjacent areas, and performing the corresponding position self-adaptive adjustment successively from macro to the page area outside the target page area in the target page until the page area of the adjacent target page boundary completes the position self-adaptive adjustment.

Or, the method can also be used for carrying out specific position self-adaptive adjustment after uniformly designing a new layout scheme of the page area except the target page area in the target page directly from the whole layer.

In addition, the position self-adaptive adjustment of the page areas except the target page area in the target page can be performed in a random or recombinant mode, after the integral position self-adaptive adjustment is completed, the positions and/or the sizes of other page areas except the target page area are irrelevant to the previous state, and the layout design of other page areas is performed in a completely brand-new mode under the condition that the limited target page area is unchanged, so that the system can perform more intelligent and flexible layout adjustment on the premise of completely ensuring that the target page area accords with the personalized layout design of a user.

In addition, as mentioned above, the present application may set whether the page area in the page can be adjusted in position (the same is true for the setting of the area size) by setting whether the authority of the position can be adjusted, adding the attribute of the position can be adjusted, or the like, and in this case, the present application may continue before the target page is displayed for the first time, or dynamically performed during the process of displaying the target page.

Taking the drag operation for the position as an example, as yet another practical implementation manner, before the target page including the different page areas is displayed in the display screen in step S101, the method for adjusting the page layout of the present application may further include:

The drag attribute is used for registering position adjustment authority, and the drag event is used for registering position adjustment modes, which relate to different drag modes which can be identified by the system.

It should be appreciated that for the region-size adjustment operation, the information corresponding to the region-size adjustment operation may also be provided with the drag operation, or may be added in a relatively independent manner, including the size adjustment attribute and the size adjustment event.

The adaptive adjustment design made by the present application for page layout may be more fully understood in the following with a set of examples.

1) The method comprises the steps of collecting setting information of a user on a page area in a target page, generating a page area of a user-defined assembly page area for displaying specific page contents, and presenting different types of data or contents, such as charts, data tables, texts and the like.

Generating custom component page areas, first, needs to collect the configuration and requirements of the user, including the number, size, content, etc. of the page areas, and the user can specify the desired configuration and requirements through an interface or configuration file. For example, the user may choose to add a chart type page area, a text type page area, and a data form type page area.

Depending on the configuration and requirements entered by the user, the system will generate custom component page areas, which may be predefined component templates, each of which may contain a particular type of content and style. The generated page areas will reflect the user's selections, including the type, number, and layout of the page areas.

The generated component page areas can be dragged, resized and rearranged on the large screen, wherein as explained in the scheme above, the user can change the position and the size of the page areas at any time according to the needs and trigger the corresponding position self-adaptive adjustment to meet the information display requirements, and the flexibility enables the user to customize the layout of the large screen to best display the content of interest of the user.

2) Adding a dragable attribute to each page area, registering dragstart, drop events, enabling each page area to receive dragged information, and calculating the size and coordinates of the page area, wherein the dragable is an HTML attribute used for defining whether an element can be dragged, when one element has the dragable attribute and is set to true, a user can drag the display element, and the page area needs to be set to be dragable= "true" so that the user can drag the display element to adjust the position.

The dragstart event is a start event of a drag operation, and when a user starts to drag one page area, the system triggers the dragstart event, and a dragstart event listener may be registered for each page area to perform a specific operation at the start of the drag, for example, preparing drag data or setting a drag effect.

The drop event is a target event of a drag operation, when a user releases a dragged page area to a target position, the system triggers the drop event, and a drop event monitor can be registered for the target position to process the operation after the drag operation is completed, for example, rearranging the page area or calculating a new position of the page area.

The size of the page area is usually predefined or user-defined, and the width and height of the page area can be set by CSS styles, which may change when dragged, depending on the specific operation of the user.

The coordinates of the page area are typically determined by CSS positioning attributes (e.g., top and left attributes), and when the user drags the page area, the system captures the position of the mouse pointer and then updates the coordinates of the page area according to the user's drag operation, which can be accomplished by JavaScript code, by listening to the drag event, calculating new coordinates and applying them to the position update of the page area.

3) Registering mousedown, mousemove, mouseup events for each page area, calculating the movement distance of the mouse pointer during dragging, and then changing the position of the page area (the dragging operation is specifically completed based on the mouse)

The mouseown event is a mouse-down event, which is triggered when a user presses a mouse button, and a mouseown event listener may be registered for each page area to capture the mouse-down event.

The mousemove event is a mouse moving event, and is triggered when a user drags the mouse, when the mouse is pressed down and moves, the system continuously triggers the mousemove event, and a mousemove event monitor can be registered for each page area to capture the mouse moving event.

The mouseup event is a mouse up event, triggered when a user releases a mouse button, and when a drag operation is completed, the system triggers the mouseup event, and a mouseup event monitor can be registered for each page area to capture the mouse up event.

The moving distance refers to the distance that the mouse pointer moves during the movement of the mouse button after the depression, and is typically the displacement between the position of the mouse pointer when the mouse button is depressed and when the mouse button is released, and this distance can be obtained by calculating the difference between the current mouse position and the position of the mouse button when the mouse button is depressed.

4) When a user drags the page area, the distances between the page area and the four boundaries of the large screen, namely the upper boundary, the lower boundary, the left boundary and the right boundary, are calculated according to the generated positions of the page area, and the positions of other page areas are automatically arranged, so that the position information of the page area is calculated through the position self-adaptive adjustment of the page area:

calculating the distance between the page area and the four boundaries of the large screen from the final position of the page area under the dragging operation, namely the position placed by the user, wherein the distance can be related to the position coordinates (usually the coordinates relative to the screen or the container) of the page area and the size of the large screen;

depending on the distance between the page area and the boundary, it may be decided at which grid area position the page area is placed for further fine tuning.

Ranking according to the situation that the page area is away from the boundary:

by comparing the distances of each page area from the upper, lower, left, right boundaries, it can be decided at which position the page area is placed, which can be determined here according to a predefined arrangement rule;

For example, if a page area is very close to the top boundary, it may be aligned with the top, and if a page area is very close to the right boundary, it may be aligned with the right;

the spacing between page areas may also be adjusted according to predefined arrangement rules.

Updating page states in real time:

when the page area is dragged and placed at a new position, the page state needs to be updated in real time, and other page areas are placed at the new position;

here this can be achieved by changing the coordinates of the page area to correspond to the coordinate system of the large screen or container;

the change in interface state includes the location of the page areas, the alignment, and the spacing between the page areas.

In addition, in the process of the drag operation and the position self-adaptive adjustment, the drag operation and the position self-adaptive adjustment can be assisted by combining a processing mechanism for conveniently checking and reconstructing the grid, and the two processing mechanisms are used for ensuring that the position and the size of the page area are within an acceptable range.

The boundary checking means that when a user drags the page area or adjusts the size of the page area, the boundary of the page area is monitored, if the user tries to drag the page area out of the page boundary, the boundary checking function can prevent the operation, ensure that the page area cannot move out of the visible area, and avoid losing the interaction and information display value of the user. The boundary check may also include checking whether the page areas overlap with other page areas to avoid occlusion and confusion between page areas.

The reconstruction grid means that when a user drags or resizes the page areas, the whole layout needs to be recalculated, and the position where each page area should be placed is redetermined according to new coordinates and dimensions so that they are aligned on the screen, and the reconstruction grid function considers the spacing between the page areas to ensure that there is a proper gap between the page areas, thereby making the whole page look tidy and orderly. Reconstructing the grid may also include automatically resizing the page area to adapt the page area to the available space in the new layout.

For example, assuming that the user is dragging the page area of sales data over a sales large screen, when rearranging the page area of sales data, the boundary check prevents the page area of sales data from moving out of the screen, and the reconstruction grid is rearranged according to the position and size of the page area of new sales data to ensure that the images are orderly arranged on the screen without overlapping, while keeping the spacing between the page areas appropriate, which allows the user to easily customize the layout of the sales large screen, and only the page area of one sales data needs to be adjusted to trigger global adaptive adjustment without manually adjusting the position and size of each sales large screen.

The above description is provided for the method for adjusting the page layout, and in order to facilitate better implementation of the method for adjusting the page layout provided by the application, the application also provides a device for adjusting the page layout from the angle of a functional module.

Referring to fig. 2, fig. 2 is a schematic structural diagram of an adjusting device for page layout of the present application, and in this application, the adjusting device 200 for page layout may specifically include the following structures:

a display unit 201, configured to display a target page including different page areas in a display screen, where each page area is used to display corresponding page content;

a receiving unit 202 configured to receive a drag operation for a target page area among different page areas in a target page, and adjust the target page area from a start position to a target position along with the drag operation;

the adjusting unit 203 is configured to combine, in the target page, a target position where the current target page area is located and a target area boundary, and combine a position and an area boundary of a page area other than the target page area in different page areas, and combine an area boundary of the target page, and perform position adaptive adjustment on the page area other than the target page area in different page areas, so that the different page areas are all completely displayed on the target page.

In an exemplary implementation, the receiving unit 202 is further configured to:

the adjusting unit 203 is further configured to:

In yet another exemplary implementation, the receiving unit 202 is specifically configured to:

The adjusting unit 203 is specifically configured to:

In yet another exemplary implementation, the position adaptive adjustment is performed based on a pitch alignment principle, constrained by a minimum position adjustment range.

In yet another exemplary implementation, the apparatus further comprises a configuration unit 204 for:

The present application further provides a processing device from the perspective of a hardware structure, referring to fig. 3, fig. 3 shows a schematic structural diagram of the processing device of the present application, specifically, the processing device of the present application may include a processor 301, a memory 302, and an input/output device 303, where the processor 301 is configured to implement steps of a method for adjusting a page layout in a corresponding embodiment as shown in fig. 1 when executing a computer program stored in the memory 302; alternatively, the processor 301 is configured to implement functions of each unit in the corresponding embodiment of fig. 2 when executing the computer program stored in the memory 302, and the memory 302 is configured to store the computer program required for the processor 301 to execute the method for adjusting the page layout in the corresponding embodiment of fig. 1.

By way of example, a computer program may be split into one or more modules/units, which are stored in the memory 302 and executed by the processor 301 to complete the present application. One or more of the modules/units may be a series of computer program instruction segments capable of performing particular functions to describe the execution of the computer program in a computer device.

The processing devices may include, but are not limited to, a processor 301, a memory 302, and an input output device 303. It will be appreciated by those skilled in the art that the illustrations are merely examples of processing devices, and are not limiting of processing devices, and may include more or fewer components than shown, or may combine some components, or different components, e.g., processing devices may also include network access devices, buses, etc., through which processor 301, memory 302, input output device 303, etc., are connected.

The processor 301 may be a central processing unit (Central Processing Unit, CPU), but may also be other general purpose processors, digital signal processors (Digital Signal Processor, DSP), application specific integrated circuits (Application Specific Integrated Circuit, ASIC), field programmable gate arrays (Field-Programmable Gate Array, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or the like. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like, which is a control center for a processing device, with various interfaces and lines connecting the various parts of the overall device.

The memory 302 may be used to store computer programs and/or modules, and the processor 301 implements various functions of the computer device by running or executing the computer programs and/or modules stored in the memory 302 and invoking data stored in the memory 302. The memory 302 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, application programs required for at least one function, and the like; the storage data area may store data created according to the use of the processing device, or the like. In addition, the memory may include high-speed random access memory, and may also include non-volatile memory, such as a hard disk, memory, plug-in hard disk, smart Media Card (SMC), secure Digital (SD) Card, flash Card (Flash Card), at least one disk storage device, flash memory device, or other volatile solid-state storage device.

The processor 301 is configured to execute the computer program stored in the memory 302, and may specifically implement the following functions: displaying a target page comprising different page areas in a display screen, wherein each page area is used for displaying corresponding page content;

It will be clearly understood by those skilled in the art that, for convenience and brevity of description, the specific working process of the above-described page layout adjustment device, processing apparatus and corresponding units thereof may refer to the description of the page layout adjustment method in the corresponding embodiment of fig. 1, and will not be described herein in detail.

Those of ordinary skill in the art will appreciate that all or a portion of the steps of the various methods of the above embodiments may be performed by instructions, or by instructions controlling associated hardware, which may be stored in a computer-readable storage medium and loaded and executed by a processor.

For this reason, the present application provides a computer readable storage medium, in which a plurality of instructions capable of being loaded by a processor are stored, so as to execute the steps of the method for adjusting a page layout in the corresponding embodiment of fig. 1, and specific operations may refer to the description of the method for adjusting a page layout in the corresponding embodiment of fig. 1, which is not repeated herein.

Wherein the computer-readable storage medium may comprise: read Only Memory (ROM), random access Memory (Random Access Memory, RAM), magnetic or optical disk, and the like.

Since the instructions stored in the computer readable storage medium may execute the steps of the method for adjusting a page layout in the corresponding embodiment of fig. 1, the beneficial effects that can be achieved by the method for adjusting a page layout in the corresponding embodiment of fig. 1 are shown in detail in the foregoing description, and are not repeated herein.

The foregoing has described in detail the methods, apparatuses, processing devices and computer readable storage medium for adjusting page layout provided in the present application, and specific examples have been applied to illustrate the principles and embodiments of the present application, where the foregoing examples are only used to help understand the methods and core ideas of the present application; meanwhile, those skilled in the art will have variations in the specific embodiments and application scope in light of the ideas of the present application, and the present description should not be construed as limiting the present application in view of the above.

Claims

1. A method for adjusting a page layout, the method comprising:

receiving a drag operation of the target page area in the target page aiming at the different page areas, and adjusting the target page area from a starting position to a target position along with the drag operation;

and in the target page, combining the target position and the target area boundary of the current target page area, combining the position and the area boundary of the page areas except the target page area in the different page areas, and combining the area boundary of the target page, performing position self-adaptive adjustment on the page areas except the target page area in the different page areas, so that the different page areas are completely displayed on the target page.

2. The method according to claim 1, wherein the method further comprises:

receiving an area size adjustment operation aiming at the target page area in the target page, and adjusting the target page area from the original area size to the target area size along with the area size adjustment operation;

And in the target page, combining the current target position, the target region boundary and the target region size of the target page region, combining the position, the region boundary and the region size of the page region except the target page region in the different page regions, and combining the region boundary of the target page, performing position self-adaptive adjustment on the page region except the target page region in the different page regions, so that the different page regions are completely displayed on the target page.

3. The method of claim 1, wherein the receiving a drag operation in the target page for a target page region of the different page regions and adjusting the target page region from a starting position to a target position with the drag operation comprises:

receiving setting operation of target page areas in the target page aiming at different page areas, adjusting the target page areas from a starting position to a target position along with dragging operation contained in the setting operation, and adjusting the target page areas from an original area size to a target area size along with area size adjustment operation contained in the setting operation;

In the target page, combining the target position and the target area boundary of the current target page area, combining the position and the area boundary of the page area except the target page area in the different page areas, and combining the area boundary of the target page, performing position self-adaptive adjustment on the page area except the target page area in the different page areas, so that the different page areas are completely displayed on the target page, including:

4. A method according to claim 2 or 3, characterized in that the position adaptation is performed on the basis of a pitch alignment principle, constrained by a minimum position adjustment range.

5. The method of claim 1, wherein prior to presenting the target page comprising different page areas in the display screen, the method further comprises:

and configuring the different page areas for display on the target page, and adding information of the different page areas including drag attributes and drag events to respond to subsequent position adaptive adjustment processing.

6. A device for adjusting a layout of a page, the device comprising:

the display unit is used for displaying a target page comprising different page areas in the display screen, wherein each page area is used for displaying corresponding page content;

a receiving unit configured to receive a drag operation for a target page area among the different page areas in the target page, and adjust the target page area from a start position to a target position in accordance with the drag operation;

the adjusting unit is used for combining the target position and the target area boundary of the current target page area, combining the position and the area boundary of the page areas except the target page area in the different page areas, and combining the area boundary of the target page, and carrying out position self-adaptive adjustment on the page areas except the target page area in the different page areas, so that the different page areas are completely displayed on the target page.

7. The apparatus of claim 6, wherein the receiving unit is further configured to:

the adjusting unit is further used for:

8. The apparatus according to claim 6, wherein the receiving unit is specifically configured to:

The adjusting unit is specifically configured to:

9. The apparatus of claim 7 or 8, wherein the position adaptive adjustment is performed based on a pitch alignment principle, constrained by a minimum position adjustment range.

10. The apparatus of claim 6, further comprising a configuration unit configured to: