A discrete grid-based UI module drag layout method and device

Abstract

This disclosure relates to the field of web front-end development technology, and discloses a method and apparatus for drag-and-drop layout of UI modules based on discrete grids. By constructing a layout container divided into an N-column grid system, and mapping the current movement position of the target operation module to the target grid coordinates in real time, the disordered free drag trajectory is adapted to the discrete grid measurement, thereby avoiding the defects of scattered module positions and difficulty in alignment caused by the free pixel coordinate system, and effectively maintaining the regularity of the overall layout under complex layout requirements. By inserting temporary placeholder elements at the target grid coordinates based on the current layout snapshot, and calling the compact arrangement algorithm to calculate the actual reachable position to render the placeholder prompt, real-time collision avoidance and dynamic prediction of landing point visualization are realized during the drag process, reducing the frequency of trial and error operations for users.

Description

Technical Field

[0001] This disclosure relates to the field of web front-end development technology, specifically to a method and apparatus for dragging and dropping UI modules based on discrete grids. Background Technology

[0002] With the popularization of data visualization dashboards and low-code configuration platforms, drag-and-drop technology, represented by the combination of free pixel coordinate system and absolute positioning of Cascading Style Sheets (CSS), has become the mainstream construction mechanism for users to quickly assemble UI modules and customize interfaces.

[0003] However, the UI module drag-and-drop layout methods in related technologies rely on the continuous state synchronization and DOM redrawing of front-end frameworks (such as React / Vue), which cannot isolate the hierarchical differences between high-frequency mouse interactions and global view updates. This leads to frequent page reflows, a sharp drop in interaction frame rate, and noticeable lag. Furthermore, when faced with complex layout requirements for multiple modules, the static drag-and-drop strategy based on free coordinates is not only difficult to maintain the regularity of the overall layout and grid alignment, but also lacks the ability to predict module collisions and landing points in real time during dragging. This increases the frequency of trial and error for users and significantly reduces the efficiency of interface construction.

[0004] Therefore, there is an urgent need for a UI module drag-and-drop layout method that can adapt to discrete grid coordinates, dynamically decouple high-frequency rendering layers, and support real-time landing point prediction and compact arrangement, so as to effectively eliminate performance bottlenecks and achieve a dynamic balance between interactive smoothness and layout regularity. Summary of the Invention

[0005] In view of this, this disclosure provides a UI module drag-and-drop layout method and apparatus based on discrete grids to solve the problem of how to implement a UI module drag-and-drop layout method that can adapt to discrete grid coordinates, dynamically decouple high-frequency rendering layers, and support real-time landing point prediction and compact arrangement, thereby effectively eliminating performance bottlenecks and achieving a dynamic balance between interactive smoothness and layout regularity.

[0006] On the one hand, this disclosure provides a drag-and-drop layout method for UI modules based on discrete grids, the method including: Construct a layout container divided into an N-column grid system, and arrange multiple UI modules in the layout container. Each UI module has position and size parameters based on the grid system metric. Listen for interaction trigger events for UI modules, determine the target operation module based on the trigger area, and record the initial state of the target operation module; During the interactive movement of the target operation module, the current movement position of the target operation module is mapped to the target grid coordinates, and a temporary placeholder element is inserted at the target grid coordinates based on the current layout snapshot of the layout container. The compact arrangement algorithm is called to calculate the actual reachable position of each UI module, including temporary placeholder elements, and placeholder hints are rendered at the actual reachable positions corresponding to the temporary placeholder elements. The compact arrangement algorithm includes: maintaining a column occupancy height array, traversing each UI module participating in the arrangement in ascending order according to the vertical coordinate, taking the maximum occupancy value of each column spanned by the currently traversed module in the column occupancy height array as the vertical starting position of the currently traversed module, and updating the occupancy height of the corresponding column according to the maximum occupancy value. In response to the interactive release event, based on the final actual reachable position of the target operation module, the compact arrangement algorithm is invoked to rearrange the overall layout of the layout container.

[0007] On the other hand, this disclosure also provides a UI module drag-and-drop layout device based on a discrete grid, the device comprising: The container building module is used to build a layout container divided into an N-column grid system. Multiple UI modules are placed in the layout container, and each UI module has position and size parameters based on the grid system metric. The event listener module is used to listen for interaction trigger events of the UI module, determine the target operation module based on the trigger area, and record the initial state of the target operation module; The interaction processing module is used to map the current movement position of the target operation module to the target grid coordinates during the interactive movement process of the target operation module, and insert temporary placeholder elements at the target grid coordinates based on the current layout snapshot of the layout container. The layout prediction module is used to call the compact arrangement algorithm to calculate the actual reachable position of each UI module, including temporary placeholder elements, and render placeholder hints at the actual reachable position corresponding to the temporary placeholder elements. The compact arrangement algorithm includes: maintaining a column occupancy height array, traversing each UI module participating in the arrangement in ascending order according to the vertical coordinate, taking the maximum occupancy value of each column spanned by the current traversed module in the column occupancy height array as the vertical starting position of the current traversed module, and updating the occupancy height of the corresponding column according to the maximum occupancy value. The layout confirmation module is used to respond to interactive release events and, based on the final actual reachable position of the target operation module, call the compact arrangement algorithm to rearrange the overall layout of the layout container.

[0008] On the other hand, this disclosure also provides an electronic device, including: a memory for storing a computer program; and a processor for implementing the steps of any of the above-described discrete grid-based UI module drag-and-drop layout methods when executing the computer program.

[0009] On the other hand, this disclosure also provides a computer-readable storage medium storing a computer program, wherein the computer program, when executed by a processor, implements the steps of any of the above-described discrete grid-based UI module drag-and-drop layout methods.

[0010] On the other hand, this disclosure also provides a computer program product, including a computer program that, when executed by a processor, implements the steps of any of the above-described discrete grid-based UI module drag-and-drop layout methods.

[0011] In the UI module drag-and-drop layout method and apparatus based on discrete grids in the above embodiments of this disclosure, firstly, by constructing a layout container divided into an N-column grid system, and mapping the current movement position of the target operation module to the target grid coordinates in real time, the disordered free drag trajectory is adapted to the discrete grid metric, thereby avoiding the defects of scattered module positions and difficulty in alignment caused by the free pixel coordinate system, and effectively maintaining the regularity of the overall layout under complex layout requirements. Secondly, by inserting temporary placeholder elements at the target grid coordinates based on the current layout snapshot, and calling the compact arrangement algorithm to calculate the actual reachable position to render the placeholder prompt, real-time collision avoidance and dynamic prediction of landing point visualization are realized during the dragging process, reducing the frequency of trial and error operations for users. Finally, a compact arrangement algorithm is used to maintain an array of column heights. The maximum occupancy value of each column spanned by the current traversal module is used as the starting position of the vertical axis, and the occupancy height of the corresponding column is dynamically updated. This achieves a top-down, gapless compact arrangement mechanism. This mechanism ensures that UI modules are arranged in an adaptive compact manner according to a greedy strategy, and guarantees strict consistency between the final overall layout reordering and the drag preview result after release. This effectively improves the efficiency of interface construction and the determinism of the solution. Attached Figure Description

[0012] To more clearly illustrate the embodiments of this disclosure, the accompanying drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this disclosure. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0013] Figure 1 A flowchart illustrating a UI module drag-and-drop layout method based on a discrete grid, provided in an embodiment of this disclosure; Figure 2 A schematic diagram illustrating the draggable effect of a UI module drag-and-drop layout method based on a discrete grid provided in this embodiment of the disclosure; Figure 3 A schematic diagram illustrating the grid column occupancy relationship of a UI module drag-and-drop layout method based on a discrete grid provided in an embodiment of this disclosure; Figure 4 A first schematic diagram illustrating the drag-and-drop sticky effect of a UI module drag-and-drop layout method based on a discrete grid, provided in an embodiment of this disclosure; Figure 5 A second schematic diagram illustrating the drag-and-drop sticky effect of a UI module drag-and-drop layout method based on a discrete grid, provided in an embodiment of this disclosure; Figure 6 A third schematic diagram illustrating the drag-and-drop sticky effect of a UI module drag-and-drop layout method based on a discrete grid, provided in an embodiment of this disclosure; Figure 7 A schematic diagram of the structure of a UI module drag-and-drop layout device based on a discrete grid provided in an embodiment of this disclosure; Figure 8 This is a schematic diagram of the structure of an electronic device according to an embodiment of the present disclosure. Detailed Implementation

[0014] The technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this disclosure, and not all embodiments. Based on the embodiments of this disclosure, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the protection scope of this disclosure.

[0015] With the increasing popularity of data visualization dashboards and low-code configuration platforms, users need to quickly drag and scale components through graphical interfaces to generate custom layouts. Existing visualization module drag-and-drop technologies mostly use a free pixel coordinate system combined with CSS absolute positioning. While this can meet basic displacement and size change requirements, it has shortcomings in practical engineering applications: 1. Free dragging and scaling result in pixel-level discrete distribution of module positions / sizes, making it difficult to maintain the regularity of the overall layout and the consistency of responsive proportions. After release, modules are prone to overlap or uneven gaps.

[0016] 2. Most solutions only perform layout recalculation after the mouse is released, lacking real-time collision prediction during dragging. Users cannot predict the landing point, resulting in frequent trial-and-error operations of "module squeezing / covering after dragging".

[0017] 3. Modern front-end rendering frameworks (such as React / Vue) continuously trigger state updates and virtual DOMDiff during drag-and-drop, resulting in frequent page reflow and repaint, a sharp drop in the interaction frame rate, and noticeable lag.

[0018] 4. Existing solutions mostly use hard-cut boundary constraints (such as stopping when the container edge is touched), lacking a "top-squeeze" compact arrangement algorithm based on column / row occupancy status, making it difficult to achieve adaptive greedy layout.

[0019] Therefore, there is an urgent need for a lightweight, high-performance drag-and-drop layout solution with real-time collision prediction and mesh discretization alignment capabilities to address the aforementioned technical challenges.

[0020] To address the aforementioned problems, this disclosure provides a UI module drag-and-drop layout method based on a discrete grid. The method includes: constructing a layout container divided into N columns of a grid system; arranging multiple UI modules within the layout container, each UI module having position and size parameters based on the grid system measurement; listening for interaction trigger events on the UI modules; determining the target operation module based on the trigger area; and recording the initial state of the target operation module; during interactive movement of the target operation module, mapping the current movement position of the target operation module to target grid coordinates; and inserting temporary placeholders at the target grid coordinates based on the current layout snapshot of the layout container. The process involves: 1. Calculating the actual reachable positions of each UI module, including temporary placeholder elements, using a compact arrangement algorithm; 2. Rendering placeholder indicators at the actual reachable positions corresponding to the temporary placeholder elements; 3. Maintaining a column height array; 4. Traversing each UI module in ascending order by vertical coordinate; 5. Taking the maximum column height value across the currently traversed module as the starting position of the current traversed module; 6. Updating the corresponding column height based on the maximum column height value; 7. Responding to an interaction release event, based on the final actual reachable position of the target operation module, using the compact arrangement algorithm to rearrange the overall layout of the layout container. It should be noted that, in the description of this disclosure, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. The terms "first," "second," etc., in this disclosure are used to distinguish similar objects and are not used to describe a particular order or sequence.

[0021] To enable those skilled in the art to better understand the present disclosure, the present disclosure will be further described in detail below with reference to the accompanying drawings and specific embodiments.

[0022] Please refer to Figure 1 , Figure 1 A flowchart illustrating a UI module drag-and-drop layout method based on a discrete grid, as provided in this embodiment of the disclosure, is shown below. Figure 1 As shown, the method may include the following steps: Step S101: Construct a layout container divided into N columns of grid system, and arrange multiple UI modules in the layout container. Each UI module has position parameters and size parameters based on the grid system metric.

[0023] In this embodiment, the layout container can refer to the outermost container element that carries all UI modules. The available width of the layout container can be divided into N columns, with a fixed spacing unitMargin maintained between adjacent columns and adjacent rows, thus obtaining the unit width unitWidth of each column. Simultaneously, a vertical unitheight is configured for the grid system; where unitHeight can be a preset fixed pixel parameter or a variable dynamically calculated based on the available height of the layout container and the preset total number of rows.

[0024] Preferably, the unit column width unitWidth can be calculated as follows: unitWidth = (available container width - (N-1) × unitMargin) / N.

[0025] N can be flexibly configured according to the business scenario. Preferably, N can be 12 to maintain compatibility with mainstream responsive grid systems and facilitate integer division.

[0026] Specifically, the layout state of each UI module can be described by a quadruple (left, top, width, height).

[0027] Where left represents the column number of the top left corner of the module, top represents the row number of the top left corner of the module, width represents the number of columns the module spans horizontally, and height represents the number of rows the module spans vertically; all four parameters are measured in grid cells, not pixel values.

[0028] The layout states of all UI modules within the layout container can be stored in a layout state data collection (such as an array). Each UI module may include, but is not limited to: an id field to uniquely identify the module, a title field to display the module title, width, height, left, and top fields to describe the layout state, and a content field to carry business content. The content field can accept any custom content to meet the business needs of different scenarios.

[0029] Understandably, through the above design, the position and size of all UI modules are constrained in a discrete grid coordinate system, thereby eliminating the alignment deviation and proportion mismatch problems caused by free pixel positioning.

[0030] Step S102: Listen for interactive trigger events for the UI module, determine the target operation module based on the trigger area, and record the initial state of the target operation module.

[0031] In this embodiment, in order to handle interactive events uniformly without binding an event listener to each UI module separately, an event delegation mechanism can be adopted to uniformly listen for interactive trigger events at the layout container layer; these interactive trigger events may include mouse press events or touch start events, etc.

[0032] Specifically, upon receiving an interaction trigger event, the functional area to which the current trigger area belongs can be determined by detecting the class name of the event target element or the identifier of its nearest ancestor element, thereby identifying the target operation module and the current interaction mode: if the trigger area is the header area of ​​a UI module, then the UI module can be identified as the target operation module, and its initial grid position can be recorded as the starting state, entering the shift mode; if the trigger area is the scaling identifier area of ​​a UI module, then the UI module can be identified as the target operation module, and its initial grid size can be recorded as the starting state, entering the scaling mode.

[0033] Furthermore, after determining the target operation module, the current visual transformation value of the target operation module can be obtained as a reference for subsequent calculation of interactive movement. At the same time, a placeholder prompt can be initialized and placed at the current position of the target operation module to prepare for the real-time landing point prediction in the subsequent step S104. The deviation between the cursor coordinates of the current interactive trigger event and the current position of the target operation module is recorded for use in the subsequent step S103 when calculating accurate grid mapping.

[0034] It should be noted that by using the event delegation mechanism to listen to events uniformly at the layout container layer, instead of registering event handling functions separately on each UI module, the number of event listeners can be effectively reduced, memory consumption can be reduced, and it can be ensured that there is no need to rebind events when dynamically adding or removing modules, thereby improving the robustness and maintainability of the system.

[0035] Step S103: During the interactive movement of the target operation module, the current movement position of the target operation module is mapped to the target grid coordinates, and a temporary placeholder element is inserted at the target grid coordinates based on the current layout snapshot of the layout container.

[0036] In this embodiment, this step aims to utilize the time window between the interactive trigger event and the interactive release event to construct a temporary layout state for predicting the landing point in real time while the target operation module visually follows the movement trajectory, thereby providing input for the compact arrangement calculation in step S104.

[0037] Specifically, during interactive movement, the pixel coordinates of the current movement position can be converted into target grid coordinates through the following mapping relationship: gridX=round(pixelX / (unitWidth+unitMargin)) gridY=round(pixelY / (unitHeight+unitMargin)) Here, round represents the rounding function, and pixelX and pixelY are the horizontal and vertical pixel offsets of the current movement position relative to the top left corner of the layout container, respectively. The calculation method is to obtain the current pixel coordinates of the current cursor or touch point relative to the top left corner of the layout container and subtract the deviation recorded in the initial state.

[0038] unitWidth is the unit column width, unitHeight is the unit row height, and unitMargin is the grid spacing. Through the above mapping, the continuous pixel coordinates in the movement trajectory are discretized into grid coordinates, ensuring that the landing point of the target operation module is always aligned with the grid lines.

[0039] Furthermore, after obtaining the target grid coordinates, a temporary data snapshot can be generated based on the current layout state data of the layout container. Specifically, the target operation module is removed from the temporary data snapshot, and a temporary placeholder element with a preset unique identifier is inserted at the target grid coordinates. The size parameters of the temporary placeholder element are consistent with those of the target operation module. The aforementioned temporary data snapshot represents the layout state assuming that the target operation module has been moved to the target position, which is then used for calculation by the subsequent compact arrangement algorithm.

[0040] It should be noted that the operations on the aforementioned temporary placeholder elements belong to the data layer processing, while the shadow display nodes in the view layer are implemented using a different mechanism.

[0041] Specifically, the shadow display node used to present placeholder indicators in the view layer is pre-initialized and placed within the layout container before the interaction trigger event occurs, residing in an invisible state at the bottom layer of all UI modules; when the interaction begins, the node is positioned at the current position of the target operation module and its opacity property is adjusted to make it visible; during the interactive movement, after each calculation of the actual reachable position, the shadow display node is positioned to the corresponding position simply by modifying its CSS transform property, without creating or destroying DOM nodes; when it is no longer needed to be displayed, its opacity is simply adjusted to be invisible, and the node itself remains within the layout container.

[0042] The aforementioned view layer design completely limits the visual updates of the landing point prediction to the level of style attribute modification, avoiding page reflow and repaint caused by frequent addition and deletion of DOM nodes, and further ensuring the smoothness of the interaction process.

[0043] As a preferred implementation, during interactive movement, the visual style attributes of the target operation module can be directly modified to make it follow the movement trajectory without triggering the update and reordering of the global layout state of the layout container. In this way, high-frequency interactive movement events only cause changes in the visual position of the target operation module itself, and the rendering of other modules in the layout container is not affected. This minimizes the overhead of global layout reordering while maintaining a smooth interactive frame rate, avoiding the interactive stuttering problem caused by frequent state updates and virtual DOM differential calculations in modern front-end rendering frameworks.

[0044] Furthermore, in shift mode, the target grid coordinates obtained from the above mapping are used to update the position parameters (left and top) of the target operation module; while in scaling mode, they are used to update the size parameters (width and height) of the target operation module, while the position parameters remain unchanged.

[0045] Step S104: Call the compact arrangement algorithm to calculate the actual reachable position of each UI module, including temporary placeholder elements, and render placeholder hints at the actual reachable position corresponding to the temporary placeholder elements; wherein, the compact arrangement algorithm includes: maintaining a column occupancy height array, traversing each UI module participating in the arrangement in ascending order according to the vertical coordinate, taking the maximum occupancy value of each column crossed by the currently traversed module in the column occupancy height array as the vertical starting position of the currently traversed module, and updating the occupancy height of the corresponding column according to the maximum occupancy value.

[0046] In this embodiment, the compact arrangement algorithm can be based on a greedy strategy to perform a top-down, gapless arrangement of all UI modules (including temporary placeholder elements) within the layout container in order to determine the actual reachable position of each module under the current layout constraints.

[0047] Specifically, the algorithm can be executed as follows: First, all UI modules, including temporary placeholder elements, are sorted in ascending order by their vertical coordinates (top value) to ensure that modules at the top are processed first. Then, a column height array of length N is maintained, with each element initially set to zero, indicating that each column is not occupied in the initial state. Next, each UI module is processed in ascending order: For the currently traversed module, the column range it spans is determined based on its horizontal starting position and width parameter, and the maximum value maxY of the current height of each column within that column range is taken from the column height array. maxY is used as the vertical starting position of the current module to ensure that it is close to the bottom edge of the modules already arranged above without creating gaps. After the position is determined, the occupied height of the corresponding column range in the column height array is updated to the sum of maxY and the current module height parameter for reference by subsequent modules. Finally, after the traversal is completed, the maximum value of each element in the column height array is the total height required by the layout container.

[0048] Furthermore, the execution result of the compact arrangement algorithm can include the following three outputs: the actual coordinate data of each UI module after arrangement, the actual reachable position of the temporary placeholder element, and an indicator of whether the position has changed compared with the previous execution result.

[0049] After obtaining the above output, it can be determined whether the placeholder hint flag needs to be updated based on the position change flag: if the actual reachable position changes, the placeholder hint flag is rendered or updated at the corresponding position; if it does not change, the current placeholder hint flag is kept unchanged to avoid unnecessary re-rendering overhead.

[0050] It should be noted that during the entire interactive movement process, the compact arrangement algorithm calculates the temporary data snapshot in a pure function manner and does not directly modify the global layout state of the layout container; therefore, its calculation result is only used to drive the real-time rendering of the placeholder hint mark, without affecting the actual position of the other UI modules in the layout container, until the interactive release event in step S105 is triggered.

[0051] In step S105, in response to the interactive release event, based on the final actual reachable position of the target operation module, the compact arrangement algorithm is invoked to rearrange the layout of the layout container.

[0052] In this embodiment, when the user completes the interaction and triggers the interaction release event, the layout confirmation and overall rearrangement stage begins.

[0053] Specifically, the final actual reachable position of the target operation module, i.e. the actual reachable position output by the last execution of the compact arrangement algorithm in step S104, can be written into the global layout state data of the layout container. The above writing operation will trigger the overall responsive update of the layout container, so that each UI module switches from a temporary following state based on visual style attributes to a formal rendering state based on layout state data.

[0054] During this switching process, it is necessary to clear any visual style property modifications applied by the target operation module during interactive movement (such as removing the CSS transform property in shift mode or the width / height inline style modifications in scaling mode) to prevent the visual offset of the high-frequency rendering layer from being incorrectly superimposed with the global layout state coordinates.

[0055] At the same time, the transparency property of the shadow display node within the layout container is adjusted to be invisible, completing the cleanup of the view layer in this interaction. Since the shadow display node is placed in a persistent manner below all UI modules, and its visibility is controlled only by transparency, the above hiding operation does not incur the overhead of deleting or rearranging DOM nodes.

[0056] Furthermore, after the state writing is completed, the compact arrangement algorithm is called again to rearrange the layout of all UI modules in the layout state data. This rearrangement is based on the final confirmed position of the target operation module. A complete greedy compact arrangement calculation is performed on all modules to eliminate temporary placeholders and finally determine the layout coordinates of each module, thus completing the entire process of this interaction operation.

[0057] It should be noted that, since the placeholder prompt in step S104 has predicted and displayed the actual reachable position of the target operation module in real time during the interactive movement, the final result of the overall layout rearrangement in step S105 is strictly consistent with the position indicated by the placeholder prompt seen by the user before release, thereby eliminating operational uncertainty and improving the user's operating experience and the predictability of the layout scheme.

[0058] In the UI module drag-and-drop layout method and apparatus based on discrete grids in the above embodiments of this disclosure, firstly, by constructing a layout container divided into an N-column grid system, and mapping the current movement position of the target operation module to the target grid coordinates in real time, the disordered free drag trajectory is adapted to the discrete grid metric, thereby avoiding the defects of scattered module positions and difficulty in alignment caused by the free pixel coordinate system, and effectively maintaining the regularity of the overall layout under complex layout requirements. Secondly, by inserting temporary placeholder elements at the target grid coordinates based on the current layout snapshot, and calling the compact arrangement algorithm to calculate the actual reachable position to render the placeholder prompt, real-time collision avoidance and dynamic prediction of landing point visualization are realized during the dragging process, reducing the frequency of trial and error operations for users. Finally, a compact arrangement algorithm is used to maintain an array of column heights. The maximum occupancy value of each column spanned by the current traversal module is used as the starting position of the vertical axis, and the occupancy height of the corresponding column is dynamically updated. This achieves a top-down, gapless compact arrangement mechanism. This mechanism ensures that UI modules are arranged in an adaptive compact manner according to a greedy strategy, and guarantees strict consistency between the final overall layout reordering and the drag preview result after release. This effectively improves the efficiency of interface construction and the determinism of the solution.

[0059] In one possible implementation of step S102 above, the target operation module is determined based on the triggering region, and the initial state of the target operation module is recorded, including: Identify the triggering area of ​​interactive events; If the triggering area is the header area of ​​a UI module, then the UI module that triggered the interaction event is identified as the target operation module, and the initial grid position of the target operation module is recorded as the starting state. If the triggering area is the scaling indicator area of ​​the UI module, then the UI module that triggered the interaction event is identified as the target operation module, and the initial grid size of the target operation module is recorded as the starting state.

[0060] In this embodiment, each UI module may structurally include three sub-regions: a header area (element header), a content area (element body), and a footer area (element footer).

[0061] The header area displays the module title and serves as the trigger area for the shift mode; the bottom area serves as the trigger area for the zoom mode, and it has a zoom icon, which is visually located in the lower right corner of the module.

[0062] When the user's cursor or touch point hovers over the head area, the cursor style can change to a hand icon to indicate that the area supports drag and move operations; when the user's cursor or touch point hovers over the bottom area, the cursor style can change to a zoom icon to indicate that the area supports drag and zoom operations.

[0063] Specifically, when identifying the triggering area, the class name of the target element of the interactive triggering event can be detected to determine whether the current click is on the header or the bottom area.

[0064] For example, the classList.contains() method can be used to detect whether the target element carries the identifier class name corresponding to the header or footer area. Since each UI module consists of three child elements: header, content, and footer, and they share the same parent node, which is the root node element of the corresponding UI module, the closest() method can be used to locate the root node of the UI module closest to the target element along the DOM tree, thereby obtaining a reference to the target operation module without having to traverse and match all UI modules.

[0065] Furthermore, after determining the target operation module and interaction mode, the following status recording steps can be performed: Obtain the current visual transformation value of the target operation module as a reference for subsequent calculation of movement; initialize the pre-existing shadow display node in the layout container as a placeholder indicator, modify its CSS transform property to position it at the current position of the target operation module, and adjust its size parameters and transparency properties to make it visible in a form consistent with the current position and size of the target operation module; record the deviation between the coordinates of the current interaction trigger event and the current position of the target operation module for use in the subsequent step S103 when calculating the actual movement distance.

[0066] For example, if the current layout state of a UI module is (left=0, top=2, width=12, height=2), and the user clicks on its head area to trigger the shift mode, then the module is identified as the target operation module, and its initial grid position (left=0, top=2) is recorded as the starting state. Subsequent updates to the position parameters during interactive movement are all based on this. If the user clicks on the bottom area of ​​the same module to trigger the zoom mode, then the module is also identified as the target operation module, and its initial grid size (width=12, height=2) is recorded as the starting state. Subsequent updates to the size parameters during interactive movement are all based on this, while the position parameters remain unchanged.

[0067] In the UI module drag-and-drop layout method and apparatus based on discrete grids in the above embodiments of this disclosure, by dividing the UI module into three sub-regions—head region, content region, and bottom region—and distinguishing between shift mode and scaling mode based on the class name of the target element of the interaction trigger event, a unified processing architecture that supports both drag-and-drop shifting and drag-and-drop scaling interactive operations simultaneously with a single event delegate entry is achieved. The initial grid position and initial grid size are used as the starting states for the two modes, respectively, providing an accurate reference basis for coordinate mapping and compact arrangement calculation in subsequent steps S103 to S105, ensuring the consistency and accuracy of the results of the two types of operations in the layout prediction and final rearrangement stages.

[0068] In one possible implementation of the above embodiments, the method further includes: During interactive movement, the visual style properties of the target operation module are directly modified to make the target operation module follow the movement trajectory without triggering a global layout state update of the layout container. In response to the interaction release event, clear the visual style attribute modifications of the target operation module.

[0069] In this embodiment, in the standard front-end rendering framework, every change in state data will trigger the virtual DOM differential calculation and the re-rendering of the component tree. In high-frequency interactive movement events, if every displacement triggers a global state update, it will result in dozens or even hundreds of reflow and repaint operations per second, far exceeding the normal page refresh frequency, causing obvious interactive stuttering.

[0070] Therefore, this embodiment adopts a rendering layer decoupling strategy to separate the visual displacement of the target operation module from the global state update of the layout container in terms of timing.

[0071] Specifically, during interactive movement, the visual style properties of the target operation module can be directly modified through the underlying interface to achieve a visual effect that follows the movement trajectory. In shift mode, the CSS transform property of the target operation module can be modified to make it move in real time following the movement trajectory. In scaling mode, the width and height style properties of the target operation module can be modified to reflect size changes in real time. The above modifications to the visual styles only affect the target operation module itself and will not trigger a responsive update of the global layout state of the layout container. The rendering of other UI modules in the layout container remains static throughout the entire interactive movement process.

[0072] It should be noted that this rendering layer decoupling mechanism completely confines high-frequency visual displacement operations to the direct style operation level, bypassing the front-end framework's state management mechanism and virtual DOM scheduling process. Only in the interaction release phase of step S105 is the final layout state of the target operation module written to the layout state data once, triggering the framework to perform a single global reflow. For example, after adopting the above rendering decoupling strategy, drag-and-drop interaction can stably maintain a rendering frame rate of 60 frames per second, while when using the framework's conventional state update method, the frame rate will significantly decrease as the number of modules increases.

[0073] In the UI module drag-and-drop layout method and apparatus based on discrete grids in the above embodiments of this disclosure, by directly modifying the visual style attributes of the target operation module during interactive movement without triggering global layout state updates, the visual response of high-frequency interaction and the low-frequency state submission are completely separated in time, eliminating the virtual DOM differential calculation overhead caused by high-frequency state changes in the front-end rendering framework; enabling the layout container to maintain a smooth interaction frame rate even in complex scenarios containing a large number of UI modules, significantly improving the user's drag-and-drop operation experience.

[0074] In one possible implementation of the above embodiments, inserting a temporary placeholder element at the target grid coordinates based on the current layout snapshot of the layout container includes: Generate a temporary data snapshot of the layout container; Remove the target operation module from the temporary data snapshot and insert a temporary placeholder element with a preset unique identifier at the target grid coordinates in the temporary data snapshot.

[0075] In this embodiment, in order to accurately predict the layout result after the target operation module moves to the target grid coordinates without modifying the current actual layout state of the layout container, this embodiment introduces a temporary data snapshot mechanism to isolate the prediction calculation from the actual layout state.

[0076] Specifically, a temporary data snapshot can be generated by completely copying the current layout state data of the layout container to ensure that subsequent operations do not affect the actual layout state. After generating the temporary data snapshot, the data entries of the target operation module are found and removed from the snapshot to avoid collisions between the target operation module and its own temporary placeholder elements during the compact arrangement calculation process, which would lead to distortion of the calculation results. Subsequently, a temporary placeholder element is constructed at the target grid coordinates in the temporary data snapshot and added to the snapshot. The position parameters of the temporary placeholder element are set to the target grid coordinates, and the size parameters are consistent with those of the target operation module to accurately simulate the layout state when the target operation module occupies the position.

[0077] Furthermore, the temporary placeholder element needs to be assigned a preset unique identifier so that when the calculation result of the compact arrangement algorithm is fed back to the real layout in the subsequent step S104, the output coordinates corresponding to the temporary placeholder element can be accurately identified, thereby obtaining the actual reachable position of the target operation module. For example, the unique identifier of the temporary placeholder element can be set to "-1". This identifier will not be repeated with the id field of any real UI module when the layout container is running normally, so it can be used as a reliable temporary element identifier; in the output result of the compact arrangement algorithm, the coordinates corresponding to the entry with the unique identifier "-1" are the actual reachable position (calibration value) of the target operation module, which is used for rendering the placeholder hint.

[0078] In the UI module drag-and-drop layout method and apparatus based on discrete grids in the above embodiments of this disclosure, by generating a temporary data snapshot without modifying the actual layout state, and removing the target operation module and inserting a temporary placeholder element with a unique identifier in the snapshot, the hypothetical landing point of the target operation module is simulated without side effects; this ensures that the compact arrangement algorithm can be calculated in a temporary state that is completely isolated from the real layout, avoids interference of the prediction process with the actual layout, and provides a reliable data foundation for the accurate rendering of the placeholder prompt.

[0079] In one possible implementation of the above embodiments, if the initial state is the initial grid position, then during the interactive movement of the target operation module, lateral displacement constraints are also executed: The lateral displacement range of the target operation module is constrained within a preset interval. The upper limit of the preset interval is determined by the product of the difference between the total number of columns in the grid system and the width parameter of the target operation module, and the unit step width. The unit step width is the sum of the unit column width and the column spacing.

[0080] In this embodiment, in the shift mode, the range of movement of the target operation module in the lateral direction must be strictly constrained to prevent it from exceeding the left and right boundaries of the layout container, thus ensuring the regularity and effectiveness of the layout.

[0081] Specifically, the lower limit of the effective range of the lateral displacement constraint is zero, corresponding to the left boundary of the layout container; the upper limit is determined as follows: subtract the width parameter of the target operation module from the total number of columns N of the grid system to obtain the maximum column number that the upper left corner of the target operation module can reach in the lateral direction, and then multiply it by the unit step width (i.e., the sum of the unit column width and the column spacing) to obtain the corresponding upper limit of the lateral pixel position; through the above constraints, even if the user moves the cursor or touch point outside the boundary of the layout container, the lateral displacement of the target operation module will be forcibly truncated to the corresponding boundary value, so that the module always remains fully displayed within the layout container.

[0082] For example, in a grid system with N=12, if the width parameter of a UI module is 4 (i.e., it occupies 4 columns), then the horizontal column number of its upper left corner can move within the range of [0, 12-4], i.e. [0, 8]. When the unit column width is 60 pixels and the column spacing is 10 pixels, the corresponding upper limit of horizontal pixel displacement is 8×(60+10)=560 pixels. Horizontal displacement exceeding this range will be truncated to 560 pixels.

[0083] It should be noted that the lateral displacement constraint works in conjunction with the grid coordinate mapping in step S103: the constraint ensures that the pixel coordinates of the mapping input are within the legal range, and the mapping converts the legal pixel coordinates into the corresponding target grid column number; the two work together to ensure that the target operation module is always aligned with the grid and does not go beyond the layout container boundary during the shifting process. At the same time, since all coordinates are measured in grid cells, the final landing point of the module has a natural snap-in alignment effect, without the need for an additional snap-in algorithm.

[0084] In the UI module drag-and-drop layout method and apparatus based on discrete grids in the above embodiments of this disclosure, by constraining the lateral displacement range of the target operation module in the shift mode to an upper limit determined by the total number of columns minus the module width, module out-of-bounds behavior is prevented from the input level, ensuring that all UI modules in the layout container remain within the effective grid range after any shift operation, and providing a legal coordinate boundary guarantee for the input of the compact arrangement algorithm.

[0085] In one possible implementation of the above embodiments, rendering a placeholder hint at the actual reachable location corresponding to the temporary placeholder element includes: If the calculated actual reachable position of the temporary placeholder changes, a semi-transparent shadow placeholder is rendered at the actual reachable position, and the mesh parameters of the semi-transparent shadow placeholder are consistent with the parameters of the temporary placeholder at the actual reachable position.

[0086] In this embodiment, the rendering and updating of the placeholder prompts adopts an on-demand triggering strategy to avoid performing unnecessary rendering operations when the actual reachable position of the target operation module has not changed, thereby reducing the redrawing overhead during interactive movement.

[0087] Specifically, each execution of the compact arrangement algorithm outputs a position change flag, indicating whether the actual reachable position of the temporary placeholder element calculated this time has changed compared to the last time. If the position change flag indicates that the actual reachable position has changed, the grid parameters of the semi-transparent shadow placeholder are updated to match the position and size parameters of the temporary placeholder element at the actual reachable position, and a re-render is triggered. In the view layer, the above update is achieved by modifying the CSS transform property of the shadow display node to achieve positioning and adjusting its size style properties to match the size parameters of the actual reachable position. The entire process does not involve the creation or destruction of DOM nodes. If the position change flag indicates that the actual reachable position has not changed, the current state of the semi-transparent shadow placeholder remains unchanged, the transform property and transparency of the shadow display node are not modified, and only the visual position of the target operation module itself changes on the page, while other elements remain stationary.

[0088] Furthermore, the semi-transparent shadow placeholder adopts a semi-transparent visual style that differs from ordinary UI modules, to intuitively show users the actual grid position that the target operation module will fall into after release. For example, the semi-transparent shadow placeholder can be displayed in the layout container as a blue semi-transparent rectangle, and the grid rows and columns it occupies strictly correspond to the actual reachable position of the target operation module in the current layout, so that users can accurately predict the final layout result before release.

[0089] It should be noted that the grid parameters of the semi-transparent shadow placeholder are always consistent with the parameters of the temporary placeholder element at the actual reachable position, rather than simply following the target grid coordinates. This is because the compact arrangement algorithm may adjust the position of the temporary placeholder element from the target grid coordinates to a more compact actual reachable position. Therefore, the shadow placeholder reflects the final landing point after collision avoidance and compact arrangement calculations, accurately presenting the actual layout result after the user releases it.

[0090] In the UI module drag-and-drop layout method and apparatus based on discrete grids in the above embodiments of this disclosure, by updating the semi-transparent shadow placeholder only when the actual reachable position changes and ensuring that its grid parameters are strictly consistent with the actual reachable position output by the compact arrangement algorithm, low-overhead dynamic landing point prediction visualization is achieved; users can accurately predict the actual position of the target operation module after release at any time through the semi-transparent shadow placeholder, effectively reducing the frequency of trial and error operations and improving the operational determinism of layout configuration.

[0091] In one possible implementation of the above embodiments, updating the occupied height of the corresponding column based on the maximum occupied value includes: Get the sum of the maximum occupied value and the height parameter of the currently traversed module, and use it as the target height value; Update the values ​​of each column traversed by the currently traversed module in the column height array using the target height value.

[0092] In this embodiment, updating the column occupancy height array is a necessary step for the compact arrangement algorithm after determining the vertical starting position of the current module. Its purpose is to record the bottom boundary row position of the current module into the column occupancy height array, providing an accurate occupancy reference for the modules traversed subsequently, and ensuring that the vertical starting position of the subsequent modules does not overlap with the arranged modules.

[0093] Specifically, the target height value is calculated as follows: the maximum occupied value of each column spanned by the current traversal module (i.e., the vertical starting position maxY determined by the algorithm for this module) is added to the height parameter of the current traversal module to obtain the target height value; this target height value represents the row number of the bottom boundary of the current module after the arrangement is completed, that is, the lowest row position occupied by the current module in the vertical direction.

[0094] Furthermore, after obtaining the target height value, an update operation is performed on each column spanned by the currently traversed module in the column occupied height array: traverse each column within the column range determined by the left and width parameters of the current module, and update the value of the corresponding column to the target height value; since the current module may span multiple columns, it is necessary to ensure that the occupied height information of all columns within the column range is consistent with the actual bottom boundary of the current module to avoid position calculation deviations in some columns of subsequent modules.

[0095] For example, if the vertical starting position of a module is the 3rd row (maxY=3) and the height parameter is 2 (height=2), then the target height value is 3+2=5; if the module spans the 2nd, 3rd and 4th columns (left=2, width=3), then the values ​​of the 2nd, 3rd and 4th columns in the column occupied height array will all be updated to 5, indicating that these three columns have been occupied up to the 5th row, and the vertical starting position of subsequent modules in these three columns must not be lower than the 5th row.

[0096] In the UI module drag-and-drop layout method and apparatus based on discrete grids in the above embodiments of this disclosure, after determining the vertical starting position of each module, its bottom boundary height value is updated to the columns it spans in the column occupancy height array, thereby achieving dynamic and accurate maintenance of the occupancy status of each column; this ensures that the compact arrangement algorithm always determines the vertical starting position based on the latest column occupancy status when traversing subsequent modules, guaranteeing the correct execution of the top-down greedy arrangement strategy and the accurate output of the gapless compact arrangement result.

[0097] In one possible implementation of the above embodiments, after traversing the UI modules involved in the arrangement in ascending order according to the vertical coordinate, the method further includes: Get the maximum value of each element in the column height array, and use the maximum value as the current total height of the layout container.

[0098] In this embodiment, after all UI modules have been traversed and arranged, the values ​​of each column in the column height array represent the highest row position occupied by the corresponding column; the maximum value of each column is the lowest row position covered by all UI modules in the layout container, which is also the minimum total height that the layout container needs to provide.

[0099] Specifically, you can iterate through all N elements of the column height array and take the maximum value as the current total height of the layout container. This total height is represented by the number of grid rows and can be further converted into pixel height by combining the unit row height parameter. This is used to dynamically set the actual physical height of the layout container elements, ensuring that all UI modules are fully displayed within the visible area of ​​the layout container and avoiding content overflow or display truncation issues caused by insufficient container height.

[0100] For example, after the compact arrangement of 6 UI modules is completed, if the values ​​of the 12 elements of the column height array are [8, 8, 6, 6, 10, 10, 8, 8, 6, 6, 4, 4], then the maximum value of each column is 10, indicating that the layout container needs to provide at least 10 rows of height space; if the unit row height is 80 pixels, then the current total height of the layout container should be dynamically set to 10 × 80 = 800 pixels to fully accommodate all the arranged UI modules.

[0101] In the UI module drag-and-drop layout method and apparatus based on discrete grids in the above embodiments of this disclosure, by extracting the maximum value from the column occupied height array after all UI modules have been traversed and determining it as the current total height of the layout container, the adaptive dynamic calculation of the layout container height is realized; regardless of how the number, position and size of the modules change, the actual display height of the layout container can always maintain a precise correspondence with the current module arrangement state, ensuring that all modules are displayed completely without generating redundant blank spaces.

[0102] In one possible implementation of the above embodiments, the method further includes: Listen for size change events for the layout container and perform debouncing on the size change events; After performing debouncing, the width of the unit column in the mesh system is recalculated based on the physical width of the changed layout container; Keep the position and size parameters of each UI module unchanged, and call the compact arrangement algorithm to rearrange the layout container as a whole.

[0103] In this embodiment, when the physical size of the viewport containing the layout container or its outer container changes (e.g., browser window scaling, device screen rotation, or outer container size adjustment), the available physical width of the layout container changes accordingly. If the grid system is not recalculated at this time, the unit column width will not match the actual available width, resulting in deviations in the actual rendering positions of each UI module. Therefore, this embodiment introduces a size change monitoring and responsive reflow mechanism to ensure the consistency of the layout after changes in the physical width of the container.

[0104] Specifically, the layout container can continuously listen for size change events of itself or the outer container. Considering that this event will be triggered at a very high frequency when the user continuously adjusts the window size, it is necessary to perform debouncing processing on it. That is, after the last trigger of the event, wait for a preset silence time (e.g., 200 to 300 milliseconds) before performing subsequent operations to avoid performing reordering calculations for every frame size change and reduce unnecessary performance overhead.

[0105] Furthermore, after the anti-jitter wait ends, the width of the unit column in the mesh system is recalculated based on the physical width of the layout container after the change. The calculation method is the same as that in the initial construction in step S101, that is, the new available physical width is subtracted from the total width of the spacing between each column and then divided into N columns to obtain the new unit column width.

[0106] It's important to note that during the recalculation of unit column widths, the position parameters (left, top) and size parameters (width, height) of each UI module remain unchanged; that is, the layout at the grid coordinate level remains unchanged. The recalculation only alters the physical pixel width corresponding to each grid unit, allowing the overall layout to scale proportionally to the new container width, achieving responsive adaptation. After the unit column width recalculation is complete, a compact arrangement algorithm is called to rearrange the layout container, causing each UI module to be re-rendered to its corresponding physical pixel position based on the new unit column width. For example, if the initial physical width of the layout container is 1200 pixels, N=12, and the column spacing is 10 pixels, then the initial unit column width is (1200-11×10) / 12, approximately 90.8 pixels. When the user shrinks the browser window to 800 pixels wide, after debounce processing, the recalculated unit column width is (800-11×10) / 12, approximately 57.5 pixels. At this point, the grid coordinates of all UI modules remain unchanged; only the physical rendering size is scaled down proportionally, thus preserving the overall layout structure intact.

[0107] In the UI module drag-and-drop layout method and apparatus based on discrete grids in the above embodiments of this disclosure, by listening to the size change event of the layout container and cooperating with anti-shaking processing, the unit column width is automatically recalculated and the overall layout is triggered to rearrange after the physical width of the container changes, thereby realizing responsive layout adaptation based on discrete grid coordinate system. Since the grid coordinates of each UI module remain unchanged during the rearrangement process, the relative structure and proportion of the layout are completely preserved across screen sizes, ensuring the consistency and integrity of layout display under different devices and window sizes.

[0108] In one specific embodiment, please refer to Figure 2 , Figure 2 This is a schematic diagram illustrating the draggable effect of a UI module drag-and-drop layout method based on a discrete grid, as provided in an embodiment of this disclosure. Figure 2 As shown, two UI modules, Module A and Module B, are arranged in the layout container. Each UI module has a header area at the top to display the module title. This header area is the interaction trigger area for the shift mode in step S102. Users can click and drag the header area to change the grid position of the corresponding UI module in the layout container. Each UI module has a zoom icon in the lower right corner. The bottom area where this icon is located is the interaction trigger area for the zoom mode. Users can click and drag this icon to change the grid size of the corresponding UI module. Figure 2 The semi-transparent blue rectangular area is the placeholder indicator rendered in step S104. Its grid parameters are consistent with the parameters of the temporary placeholder element at the actual reachable position. Before the user releases the interaction operation, the precise grid position where the target operation module will fall after the user releases the button is displayed to the user in real time, realizing the visual dynamic prediction of the drag landing point. During the interactive movement, the target operation module is displayed in a visual style that follows the cursor, and does not trigger the global layout state update of the layout container. Only after the interactive release event is triggered will the final actual reachable position be written into the layout state data to complete the overall layout rearrangement.

[0109] Furthermore, in another specific embodiment, please refer to Figure 3 , Figure 3 This is a schematic diagram illustrating the grid column occupancy relationship of a UI module drag-and-drop layout method based on a discrete grid, as provided in an embodiment of this disclosure. Figure 3 As shown, the layout container is divided into 12 columns, with a fixed column spacing between each column, and the column numbers are labeled sequentially along the horizontal direction. Figure 3 The example demonstrates the layout of multiple UI modules in a discrete grid coordinate system. The left and right edges of each UI module are strictly aligned with the grid boundary lines of its respective column. The module width parameter is expressed in units of the number of columns it spans: module A has a width of 1 column, module B has a width of 3 columns, module C has a width of 6 columns, module D has a width of 2 columns, and module E has a width of 3 columns. Figure 3As shown, it is not allowed for a module edge to be located between two grid column boundary lines.

[0110] In another specific embodiment, please refer to Figure 4 , Figure 4 This is a first schematic diagram illustrating the drag-and-drop sticky effect of a UI module drag-and-drop layout method based on a discrete grid, as provided in an embodiment of this disclosure. Figure 4 As shown, Figure 4 This demonstrates the initial layout state of each UI module in the layout container before the drag operation occurs: multiple UI modules are distributed within the layout container, and there are unoccupied blank areas between the vertical starting position of some modules and the bottom edge of the modules already arranged above, i.e. there are obvious gaps in the vertical direction; the above blank areas are formed by the user's previous interaction operations, and the layout fails to automatically eliminate the gaps before the compact arrangement algorithm is executed. Figure 4 , Figure 5 and Figure 6 Together, they constitute a three-stage comparison sequence of the drag-and-drop ceiling effect, in which... Figure 4 This is the initial reference state before operation.

[0111] In another specific embodiment, please refer to Figure 5 , Figure 5 This is a second schematic diagram illustrating the drag-and-drop sticky effect of a UI module drag-and-drop layout method based on a discrete grid, as provided in an embodiment of this disclosure. Figure 5 As shown, Figure 5 The real-time predicted state of the layout container during interactive movement is demonstrated: the target operation module is being dragged, and its visual style follows the cursor's real-time movement without triggering a global reflow of the layout container; at the same time, the compact arrangement algorithm inserts temporary placeholder elements at the target grid coordinates based on the current layout snapshot and completes the calculation, determining the actual reachable position of the target operation module as the most compact landing point close to the bottom edge of the already arranged modules above, and rendering a semi-transparent placeholder indicator at that position. Figure 5 The position of the placeholder indicator is not the current visual position of the cursor of the target operation module, but the actual reachable position after being corrected by the greedy top-up algorithm. As a result, users can know in advance that the module will be automatically snapped to the most compact position before the release operation, which reflects the effect of real-time collision avoidance and dynamic prediction of landing point visualization during dragging.

[0112] In one specific embodiment, please refer to Figure 6 , Figure 6 This is a third schematic diagram illustrating the drag-and-drop sticky effect of a UI module drag-and-drop layout method based on a discrete grid, as provided in this embodiment of the disclosure. Figure 6 As shown, Figure 6This demonstrates the final state of the layout container after the interactive release event is triggered, showing the overall layout reordering: the target operation module has automatically snapped to the most compact position directly below the already arranged modules, based on the final calculation results of the compact arrangement algorithm; the position parameters have been written into the layout state data. Figure 4 Compared to the initial state shown, the vertical blank areas in the original layout have been completely eliminated, and all UI modules within the layout container are arranged compactly from top to bottom without gaps; this final layout result is consistent with... Figure 5 The predicted landing point indicated by the placeholder icon is strictly consistent, which reflects the strict consistency between the drag preview result and the final overall rearrangement result. This verifies that the greedy compact arrangement algorithm can eliminate layout gaps and achieve adaptive compact arrangement in drag layout scenarios.

[0113] In one embodiment, a UI module drag-and-drop layout device based on a discrete grid is provided, which corresponds one-to-one with the UI module drag-and-drop layout method based on a discrete grid in the above embodiments. For example... Figure 7 As shown, it includes: Container building module 71 is used to build a layout container divided into an N-column grid system. Multiple UI modules are arranged in the layout container, and each UI module has position parameters and size parameters based on the grid system metric. Event listening module 72 is used to listen for interaction trigger events of UI modules, determine the target operation module based on the trigger area, and record the initial state of the target operation module; The interaction processing module 73 is used to map the current movement position of the target operation module to the target grid coordinates during the interactive movement process of the target operation module, and insert a temporary placeholder element at the target grid coordinates based on the current layout snapshot of the layout container. The layout prediction module 74 is used to call the compact arrangement algorithm to calculate the actual reachable position of each UI module, including temporary placeholder elements, and render placeholder hints at the actual reachable position corresponding to the temporary placeholder elements. The compact arrangement algorithm includes: maintaining a column occupancy height array, traversing each UI module participating in the arrangement in ascending order according to the vertical coordinate, taking the maximum occupancy value of each column crossed by the current traversed module in the column occupancy height array as the vertical starting position of the current traversed module, and updating the occupancy height of the corresponding column according to the maximum occupancy value. The layout confirmation module 75 is used to respond to the interactive release event and, based on the final actual reachable position of the target operation module, call the compact arrangement algorithm to rearrange the overall layout of the layout container.

[0114] In one embodiment, the event listening module 72 is specifically used to identify the triggering area of ​​the interactive event; If the triggering area is the header area of ​​a UI module, then the UI module that triggered the interaction event is identified as the target operation module, and the initial grid position of the target operation module is recorded as the starting state. If the triggering area is the scaling indicator area of ​​the UI module, then the UI module that triggered the interaction event is identified as the target operation module, and the initial grid size of the target operation module is recorded as the starting state.

[0115] In one embodiment, the interaction processing module 73 is further specifically used to directly modify the visual style attributes of the target operation module during the interaction movement process so that the target operation module follows the movement trajectory without triggering the global layout state update of the layout container. In response to the interaction release event, clear the visual style attribute modifications of the target operation module.

[0116] In one embodiment, the interaction processing module 73 is specifically used to generate a temporary data snapshot of the layout container; Remove the target operation module from the temporary data snapshot and insert a temporary placeholder element with a preset unique identifier at the target grid coordinates in the temporary data snapshot.

[0117] In one embodiment, the interactive processing module 73 is further specifically used to constrain the lateral displacement range of the target operation module within a preset interval when the initial state is the initial grid position. The upper limit of the preset interval is determined by the product of the difference between the total number of columns of the grid system and the width parameter of the target operation module and the unit step width. The unit step width is the sum of the unit column width and the column spacing.

[0118] In one embodiment, the layout prediction module 74 is specifically used to render a semi-transparent shadow placeholder at the actual reachable position if the calculated actual reachable position of the temporary placeholder element changes, and the mesh parameters of the semi-transparent shadow placeholder are consistent with the parameters of the temporary placeholder element at the actual reachable position.

[0119] In one embodiment, the layout prediction module 74 is further specifically used to obtain the sum of the maximum occupied value and the height parameter of the current traversal module as the target height value; Update the values ​​of each column traversed by the currently traversed module in the column height array using the target height value.

[0120] In one embodiment, the layout prediction module 74 is further configured to obtain the maximum value of each element in the column occupied height array and determine the maximum value as the current total height of the layout container.

[0121] In one embodiment, the device further includes a responsive adaptation module for listening to size change events for the layout container and performing debouncing on the size change events; After performing debouncing, the width of the unit column in the mesh system is recalculated based on the physical width of the changed layout container; Keep the position and size parameters of each UI module unchanged, and call the compact arrangement algorithm to rearrange the layout container as a whole.

[0122] It should be noted that the UI module drag-and-drop layout device based on discrete grids provided in the above embodiments is only illustrated by the division of the above-described program modules when implementing the corresponding UI module drag-and-drop layout method based on discrete grids. In practical applications, the above processing can be assigned to different program modules as needed, that is, the internal structure of the above device can be divided into different program modules to complete all or part of the processing described above. In addition, the system provided in the above embodiments and the corresponding Figure 1 The embodiments of the methods shown belong to the same concept, and their specific implementation process can be found in the method embodiments, which will not be repeated here.

[0123] This disclosure also provides an electronic device having the above-described features. Figure 7 The UI module drag-and-drop layout device based on a discrete grid is shown.

[0124] Figure 8 This is a schematic diagram of the structure of an electronic device according to an embodiment of the present disclosure.

[0125] The following is a detailed reference. Figure 8 The diagram illustrates a structural schematic suitable for implementing an electronic device according to embodiments of the present disclosure. The electronic device may include a processor (e.g., a central processing unit, graphics processor, etc.) 801, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 802 or a program loaded from memory 808 into random access memory (RAM) 803. The RAM 803 also stores various programs and data required for the operation of the electronic device. The processor 801, ROM 802, and RAM 803 are interconnected via a bus 804. An input / output (I / O) interface 805 is also connected to the bus 804.

[0126] Typically, the following devices can be connected to I / O interface 805: input devices 806 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 807 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; memory devices 808 including, for example, magnetic tapes, hard disks, etc.; and communication devices 809. Communication device 809 allows electronic devices to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 8 Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown, and more or fewer devices may be implemented or have instead.

[0127] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 809, or installed from a memory 808, or installed from a ROM 802. When the computer program is executed by the processor 801, it performs the functions defined in the discrete grid-based UI module drag-and-drop layout method of embodiments of this disclosure.

[0128] Figure 8 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.

[0129] This disclosure also provides a computer-readable storage medium in which the methods described in this disclosure can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code downloaded over a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and subsequently stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium may also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code. When the software or computer code is accessed and executed by the computer, processor, or hardware, the discrete grid-based UI module drag-and-drop layout method shown in the above embodiments is implemented.

[0130] A portion of this disclosure can be applied to computer program products, such as computer program instructions, which, when executed by a computer, can invoke or provide methods and / or technical solutions according to this disclosure through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, and installation package files. Accordingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions; the computer compiling the instructions and then executing the corresponding compiled program; the computer reading and executing the instructions; or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.

[0131] Although embodiments of the present disclosure have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of the present disclosure, and such modifications and variations all fall within the scope defined by the appended claims.

Claims

1. A UI module drag-and-drop layout method based on discrete grids, characterized in that, The method includes: Construct a layout container divided into an N-column grid system, and arrange multiple UI modules in the layout container. Each UI module has position parameters and size parameters based on grid system metrics. Listen for interaction trigger events for the UI module, determine the target operation module based on the trigger area, and record the initial state of the target operation module; During the interactive movement of the target operation module, the current movement position of the target operation module is mapped to target grid coordinates, and a temporary placeholder element is inserted at the target grid coordinates based on the current layout snapshot of the layout container. The compact arrangement algorithm is invoked to calculate the actual reachable position of each UI module, including the temporary placeholder element, and a placeholder prompt is rendered at the actual reachable position corresponding to the temporary placeholder element; wherein, the compact arrangement algorithm includes: maintaining a column occupancy height array, traversing each UI module participating in the arrangement in ascending order according to the vertical coordinate, taking the maximum occupancy value of each column traversed by the currently traversed module in the column occupancy height array as the vertical starting position of the currently traversed module, and updating the occupancy height of the corresponding column according to the maximum occupancy value; In response to the interactive release event, based on the final actual reachable position of the target operation module, the compact arrangement algorithm is invoked to rearrange the overall layout of the layout container.

2. The method according to claim 1, characterized in that, The step of determining the target operation module based on the trigger area and recording the initial state of the target operation module includes: Identify the triggering area of ​​the interactive event; If the triggering area is the header area of ​​the UI module, then the UI module that triggers the interaction triggering event is determined as the target operation module, and the initial grid position of the target operation module is recorded as the starting state; If the triggering area is the scaling identifier area of ​​the UI module, then the UI module that triggers the interaction trigger event is determined as the target operation module, and the initial grid size of the target operation module is recorded as the starting state.

3. The method according to claim 2, characterized in that, The method further includes: During the interactive movement, the visual style attributes of the target operation module are directly modified to make the target operation module follow the movement trajectory without triggering the global layout state update of the layout container. In response to the interaction release event, clear the visual style attribute modifications of the target operation module.

4. The method according to claim 1, characterized in that, The insertion of a temporary placeholder element at the target grid coordinates based on the current layout snapshot of the layout container includes: Generate a temporary data snapshot of the layout container; Remove the target operation module from the temporary data snapshot and insert a temporary placeholder element with a preset unique identifier at the target grid coordinates in the temporary data snapshot.

5. The method according to claim 2, characterized in that, If the initial state is the initial grid position, then the interactive movement process targeting the target operation module further includes executing lateral displacement constraints: The lateral displacement range of the target operation module is constrained within a preset interval. The upper limit of the preset interval is determined by the product of the difference between the total number of columns of the grid system and the width parameter of the target operation module, and the unit step width, where the unit step width is the sum of the unit column width and the column spacing.

6. The method according to claim 4, characterized in that, The step of rendering a placeholder hint at the actual reachable location corresponding to the temporary placeholder element includes: If the calculated actual reachable position of the temporary placeholder element changes, a semi-transparent shadow placeholder is rendered at the actual reachable position, and the mesh parameters of the semi-transparent shadow placeholder are consistent with the parameters of the temporary placeholder element at the actual reachable position.

7. The method according to claim 1, characterized in that, The step of updating the occupied height of the corresponding column according to the maximum occupied value includes: The sum of the maximum occupied value and the height parameter of the currently traversed module is obtained as the target height value; Update the values ​​of each column traversed by the current traversal module in the column occupied height array using the target height value.

8. The method according to claim 7, characterized in that, After traversing the UI modules participating in the arrangement in ascending order according to their vertical coordinates, the method further includes: Obtain the maximum value of each element in the column height array, and determine the maximum value as the current total height of the layout container.

9. The method according to claim 1, characterized in that, The method further includes: Listen for size change events for the layout container and perform debouncing on the size change events; After performing debouncing, the width of the unit column in the grid system is recalculated based on the physical width of the modified layout container; Keeping the position and size parameters of each UI module unchanged, the compact arrangement algorithm is called to rearrange the layout of the layout container.

10. A UI module drag-and-drop layout device based on a discrete grid, characterized in that, The device includes: A container building module is used to build a layout container divided into an N-column grid system, in which multiple UI modules are arranged, and each UI module has position parameters and size parameters based on grid system metrics. The event listening module is used to listen for interaction trigger events of the UI module, determine the target operation module based on the trigger area, and record the initial state of the target operation module. An interaction processing module is used to map the current movement position of the target operation module to target grid coordinates during the interactive movement process of the target operation module, and insert temporary placeholder elements at the target grid coordinates based on the current layout snapshot of the layout container. The layout prediction module is used to call the compact arrangement algorithm to calculate the actual reachable position of each UI module, including the temporary placeholder element, and render a placeholder prompt at the actual reachable position corresponding to the temporary placeholder element; wherein, the compact arrangement algorithm includes: maintaining a column occupancy height array, traversing each UI module participating in the arrangement in ascending order according to the vertical coordinate, taking the maximum occupancy value of each column crossed by the currently traversed module in the column occupancy height array as the vertical starting position of the currently traversed module, and updating the occupancy height of the corresponding column according to the maximum occupancy value; The layout confirmation module is used to respond to the interactive release event and, based on the final actual reachable position of the target operation module, call the compact arrangement algorithm to rearrange the overall layout of the layout container.

11. An electronic device, characterized in that, include: A memory and a processor are communicatively connected, the memory stores computer instructions, and the processor executes the computer instructions to perform the UI module drag-and-drop layout method based on a discrete grid as described in any one of claims 1 to 9.

12. A computer program product, characterized in that, Includes computer instructions for causing a computer to execute the UI module drag-and-drop layout method based on a discrete grid as described in any one of claims 1 to 9.

Images