Component dragging method and device, computer device and storage medium

Abstract

The application relates to an assembly dragging method and device, computer equipment and a storage medium. The assembly dragging method comprises the following steps: binding a mouse event listener to a webpage document; when the mouse is pressed, a clicked node is obtained, and the attribute of a component in which the node is located is found; when the attribute of the component is found, an index in a data source of the component is read from the attribute and is set as an active component, data of a placeholder component is added to a position behind the index, and the data source is updated; when the mouse is moved, the offset of the mouse position is calculated, the position of the placeholder component in the data source is moved according to the offset and the direction, and the data source is updated; when the mouse is released, the data of the active component is moved to the index of the placeholder component, and the data source is updated; and the webpage document is refreshed in real time every time the data source is updated, so that the assembly dragging is completed. According to the application, the dragging processing is highly aggregated, does not need to be dispersed on each component, and is decoupled from business, so that subsequent development and maintenance are easy.

Description

Technical Field

[0001] This application relates to the field of document-oriented, data-based drag-and-drop components, and in particular to a component drag-and-drop method, apparatus, computer device, and storage medium. Background Technology

[0002] An iframe is an embedded frame in HTML used to embed another webpage within a webpage. For example, embedding a microblog page within a blog allows users to directly like and share on the embedded microblog page. It's a very common frame. The width, height, outer frame parameters, and scroll parameters of an iframe can be set.

[0003] Low-code platform development involves editing and previewing functionalities. Editing requires real-time display of component rendering, while previewing needs to simulate actual page loading. Therefore, iframes are frequently used as renderers.

[0004] The editing area uses an iframe as the renderer and needs to support component dragging. The iframe in the preview function only needs to embed the actual component for rendering; dragging is not required. Currently, the common approach is to bind drag events to the actual component. However, this approach has the following technical problems: there can be many actual components, and binding drag events to each one is not only repetitive and difficult to maintain, but also redundant code for the preview function, reducing system efficiency.

[0005] Therefore, it is evident that, based on the shortcomings of existing technologies, it is crucial to provide an improved document-based data-driven component drag-and-drop method, apparatus, computer device, and storage medium to address the technical problems of difficult system maintenance and reduced system efficiency. This has become a pressing technical challenge for those skilled in the art. Summary of the Invention

[0006] The problem that the invention aims to solve

[0007] The purpose of this invention is to overcome the shortcomings of existing technologies and provide an improved component drag-and-drop method, apparatus, computer device, and storage medium for document-based data. The improved component drag-and-drop method, apparatus, computer device, and storage medium provided by this invention solve the technical problems of difficult system maintenance and reduced system efficiency.

[0008] Methods for solving problems

[0009] The first aspect of this invention relates to a component drag-and-drop method for web page documents, comprising the following steps:

[0010] The page rendering of the data source is completed to generate a web page document. The data source is a list of multiple components. During page rendering, specific properties are set for the components, and the property value of the specific property is set to the index of the current component in the data source.

[0011] Bind mouse event listeners to the web page document. Mouse events include: mouse down, mouse move, and mouse release.

[0012] When a mouse button is pressed, get the clicked node and find the properties of the component containing the node;

[0013] When a specific property of a component is found, the index of the component in the data source is read from the specific property. The component data at the corresponding index position in the data source is updated according to the index. An activation property is added to the component data to indicate that the component is active. Placeholder component data is added at the position after the index and the data source is updated.

[0014] When mouse movement is detected, the offset of the mouse position is calculated, and the position of the placeholder component in the data source is moved according to the offset and direction, and the data source is updated.

[0015] When the mouse is released, move the data from the active component to the index of the placeholder component and update the data source.

[0016] The web page document is refreshed in real time each time the data source is updated, thus enabling component drag-and-drop.

[0017] Preferably, during page rendering, a drag-and-drop attribute is set for the component to identify it as a draggable component.

[0018] When searching for the property of the component containing the node, if the property is not found, the search continues through the node's parent node until the property is found.

[0019] Preferably, if no component attribute is found and the node has no parent node, the component containing the node cannot be dragged.

[0020] Preferably, the offset of the mouse position is the difference between the position after the mouse has moved and the position when the mouse is clicked.

[0021] Preferably, when moving the position of the placeholder component in the data source according to the offset and direction,

[0022] Calculate the offset and the height multiple of the active component, and shift the index of the placeholder component forward by that height multiple.

[0023] Preferably, when moving the data of the active component to the index of the placeholder component,

[0024] First, delete the data of the active component. Then, find the index of the placeholder component, move the data of the deleted active component to the index of the placeholder component, and then delete the placeholder component.

[0025] A second aspect of the present invention relates to a component drag-and-drop device for web page documents, comprising:

[0026] The event binding section is used to bind mouse event listeners to web page documents. Mouse events include: mouse down, mouse move, and mouse release.

[0027] The click listener is used to detect when the mouse is pressed, get the clicked node, and find the properties of the component containing the node.

[0028] The component activation section is used to read the index of the component's data source from the property when the component's property is found, set it as the active component, add the data of the placeholder component at the position after the index, and update the data source.

[0029] The motion monitoring unit is used to detect mouse movement, calculate the offset of the mouse position, move the placeholder component in the data source according to the offset and direction, and update the data source.

[0030] The release listener is used to detect when the mouse is released, move the data of the active component to the index of the placeholder component, and update the data source.

[0031] The web page document is refreshed in real time each time the data source is updated, thus enabling component drag-and-drop.

[0032] The third aspect of the present invention relates to a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the component drag-and-drop method of the first aspect.

[0033] The fourth aspect of the present invention relates to a computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the steps of the component drag-and-drop method of the first aspect.

[0034] The effects of the invention

[0035] The improved component drag-and-drop method, apparatus, computer device, and storage medium provided by the present invention bind mouse event listeners to web page documents, listen to mouse events according to user operations, change the component order in the data, thereby triggering page rendering, realizing component drag-and-drop. The drag-and-drop processing is highly integrated, does not need to be scattered across various components, and decouples drag-and-drop events from business logic, making subsequent development and maintenance easier, thus solving the technical problems of difficult system maintenance and reduced system efficiency. Attached Figure Description

[0036] Figure 1This is a flowchart of a component drag-and-drop method according to the first embodiment of the present invention.

[0037] Figure 2 for Figure 1 A diagram illustrating the steps in the component drag-and-drop method.

[0038] Figure 3 for Figure 1 A diagram illustrating the steps in the component drag-and-drop method.

[0039] Figure 4 for Figure 1 The diagram illustrates the component drag-and-drop method.

[0040] Figure 5 This is a structural diagram of a computer device according to a third embodiment of the present invention. Detailed Implementation

[0041] The component dragging method involved in this invention will be described in detail below.

[0042] Figure 1 This is a flowchart of a component drag-and-drop method according to a first embodiment of the present invention. Figure 1 As shown, the specific process of this component drag-and-drop method is as follows: First, a web page document is generated (step S100). Then, mouse event listeners are bound to the web page document. Mouse events include: mouse down, mouse move, and mouse release (step S101). When the mouse is down, the clicked node is obtained and the property of the component containing the node is found (step S102). When the component's property is found, the index in the component's data source is read from the property and set as the active component. Data of the placeholder component is added at the position after this index, and the data source is updated (step S103). When the mouse is moved, the offset of the mouse position is calculated. The placeholder component is moved to the position in the data source according to the offset and direction, and the data source is updated (step S104). Finally, when the mouse is released, the data of the active component is moved to the index of the placeholder component, and the data source is updated (step S105). The web page document is refreshed in real time each time the data source is updated, thus completing the component drag-and-drop.

[0043] Step S100 is explained below. The specific method for generating the web page document is as follows: the web page document is generated by completing the page rendering of the data source. The data source is data containing a list of multiple components. The component list lists multiple components. During page rendering, specific attributes are set for the components, and the attribute value of the specific attribute is set to the index of the current component in the data source.

[0044] Reference Figure 2 Step S102 will be explained. For example... Figure 2As shown, the preferred method for finding attributes is as follows, but it is not limited to this and other appropriate methods can also be used.

[0045] When the mouse button is pressed, the component searches for the attribute. Otherwise, it searches its parent node until the attribute is found. If the attribute is not found in the clicked element and all its parent nodes, the component to which the currently clicked node belongs does not support dragging. If the attribute is found, it is a draggable component. The attribute value must include the index of the current component in the list.

[0046] Step S103 is explained below. When a specific attribute of a component is found, the index in the component's data source is read from the specific attribute. The component data at the corresponding index position in the data source is updated according to the index. An activation attribute is added to this component data to indicate that the component is active. Furthermore, placeholder component data is added at the position following this index, and the data source is updated. For component data containing an activation attribute, the next component is the newly added placeholder component data. Preferably, during webpage document rendering, a drag-and-drop attribute is set to identify the component as a draggable component.

[0047] Reference Figure 3 Step S104 will be explained. For example... Figure 3 As shown, the preferred method of movement is as follows, but it is not limited to this and other suitable methods can also be used.

[0048] When the mouse moves, record the mouse position offset. Preferably, the mouse position offset is the difference between the mouse's current position after movement and its initial position when clicked. Based on the offset and direction, move the placeholder component's position in the data source, calculate the offset multiplied by the height of the active component (x), and shift the placeholder component's index forward by x positions.

[0049] Preferably, when moving the data of the active component to the index of the placeholder component,

[0050] First, delete the data of the active component. Then, find the index of the placeholder component, move the data of the deleted active component to the index of the placeholder component, and then delete the placeholder component.

[0051] The component dragging method of the first embodiment of the present invention will be further described below through examples.

[0052] <Example 1>

[0053] Figure 4 The example shows a webpage document that uses an iframe as the renderer, divided into a component area on the left and a preview area on the right. The requirement is to allow content from the component area to be freely dragged and dropped into the preview area. The current solution is to bind a drag-and-drop event to each component in the component area.

[0054] In this embodiment, the solution described in Embodiment 1 of the present invention is adopted.

[0055] 1. Generate Figure 4 The webpage document shown.

[0056] 2. Bind mouse event listeners to the webpage document, including mouse press, mouse move, and mouse release events.

[0057] 3. Set the ref callback for the components in the component area, and add custom properties to the component instance when the component is rendered.

[0058] 4. When the mouse is pressed in the component area, search for the attribute. If it is found, the component is draggable; otherwise, search its parent node until the attribute is found. If the attribute is not found in the clicked element and all its parent nodes, the component to which the currently clicked node belongs does not support dragging. The attribute value must include the index of the current component in the list.

[0059] 5. When a custom property of a draggable component is found, its value is read to obtain the index of the currently clicked component in the data source, and this index is set as the active component. Placeholder component data is added at the position following the current index, and the data source is updated. The current mouse click position is also recorded.

[0060] 6. When the mouse moves from the component area to the preview area, record the mouse position offset. Based on the offset and direction, move the placeholder component to the data source and update the data source.

[0061] 7. When the mouse is released in the preview area, delete the placeholder component data, move the active component's data to the placeholder component's index, and update the data source.

[0062] The component drag-and-drop method according to the first embodiment of the present invention binds mouse event listeners to a web page document. Based on user operations, it listens for mouse events, changes the order of components in the data, thereby triggering page rendering and realizing component drag-and-drop. The drag-and-drop processing is highly integrated, eliminating the need to distribute across individual components, and decouples drag-and-drop events from business logic, facilitating subsequent development and maintenance. This solves the technical problems of difficult system maintenance and reduced system efficiency. Moreover, this solution is not limited to web page documents embedded in iframes; any type of HTML web page document can use this solution to implement component drag-and-drop.

[0063] The component drag-and-drop device according to the second embodiment of the present invention includes: an event binding unit for binding mouse event listeners to a web page document, the mouse events including: mouse down, mouse move, and mouse release; a down listener unit for listening to mouse down, obtaining the clicked node and finding the attribute of the component containing the node; a component activation unit for reading the index of the component's data source from the attribute and setting it as the active component when the component's attribute is found, adding the data of a placeholder component at the position after the index, and updating the data source; a move listener unit for listening to mouse move, calculating the offset of the mouse position, moving the position of the placeholder component in the data source according to the offset and direction, and updating the data source; and a release listener unit for listening to mouse release, moving the data of the active component to the index of the placeholder component, and updating the data source. The web page document is refreshed in real time each time the data source is updated, thereby completing the component drag-and-drop.

[0064] The component drag-and-drop device uses the component drag-and-drop method involved in the first embodiment of the present invention to generate the index library. Corresponding to the component drag-and-drop method of the first embodiment, various modifications of the first embodiment are also applicable to the second embodiment, and will not be described in detail here.

[0065] As described above, the component drag-and-drop device according to the second embodiment of the present invention binds mouse event listeners to the web page document, listens for mouse events based on user operations, changes the component order in the data, thereby triggering page rendering, realizing component drag-and-drop. The drag-and-drop processing is highly integrated, does not need to be scattered across various components, and decouples drag-and-drop events from business logic, making subsequent development and maintenance easier, thus solving the technical problems of difficult system maintenance and reduced system efficiency.

[0066] The third embodiment of the present invention provides a computer device, which can be a server supporting the operation of a hospital's refined management data platform, and its internal structure diagram can be as follows. Figure 5 As shown, the computer device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system, computer programs, and database. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The network interface is used to connect to external devices for data interaction. When executed by the processor, the computer program implements a component drag-and-drop method.

[0067] Those skilled in the art will understand that Figure 5The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0068] The fourth embodiment of the present invention provides a computer-readable storage medium having a computer program stored thereon, wherein a processor executes the computer program to implement the component drag-and-drop method involved in the first embodiment of the present invention.

[0069] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), Rambus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0070] Industrial application

[0071] According to the component drag-and-drop method, apparatus, computer device, and storage medium of the present invention, by binding mouse event listeners to web page documents, listening to mouse events based on user operations, changing the order of components in the data, thereby triggering page rendering, component drag-and-drop is realized. The drag-and-drop processing is highly integrated, without being scattered across various components, and the drag-and-drop events are decoupled from business logic, making subsequent development and maintenance easier. This solves the technical problems of difficult system maintenance and reduced system efficiency.

[0072] Although the invention has been illustrated and described with reference to certain preferred embodiments thereof, those skilled in the art will understand that various changes in form and detail may be made therein without departing from the spirit and scope of the invention.

Claims

1. A component drag-and-drop method, oriented towards web page documents, characterized in that, Includes the following steps: The page rendering of the data source is completed to generate a web page document. The data source is a list of multiple components. During page rendering, specific properties are set for the components, and the property value of the specific property is set to the index of the current component in the data source. Bind mouse event listeners to the web page document. Mouse events include: mouse down, mouse move, and mouse release. When a mouse button is pressed, get the clicked node and find the properties of the component containing the node; When a specific property of a component is found, the index of the component in the data source is read from the specific property. The component data at the corresponding index position in the data source is updated according to the index. An activation property is added to the component data to indicate that the component is active. Placeholder component data is added at the position after the index and the data source is updated. When mouse movement is detected, the offset of the mouse position is calculated, and the position of the placeholder component in the data source is moved according to the offset and direction, and the data source is updated. When the mouse is released, move the data from the active component to the index of the placeholder component and update the data source. The web page document is refreshed in real time each time the data source is updated, thus enabling component drag-and-drop.

2. The component drag-and-drop method according to claim 1, characterized in that, When rendering the page, set the drag attribute for the component to identify it as a draggable component. When searching for the property of the component containing the node, if the property is not found, the search continues through the node's parent node until the property is found.

3. The component drag-and-drop method according to claim 2, characterized in that, If no property of the component is found and the node has no parent node, the component containing the node cannot be dragged.

4. The component drag-and-drop method according to claim 1, characterized in that, The offset of the mouse position is the difference between the position after the mouse has moved and the position when the mouse was clicked.

5. The component drag-and-drop method according to claim 1, characterized in that, When moving the placeholder component in the data source according to the offset and direction Calculate the offset and the height multiple of the active component, and shift the index of the placeholder component forward by that height multiple.

6. The component drag-and-drop method according to claim 1, characterized in that, When moving the data of the active component to the index of the placeholder component, First, delete the data of the active component. Then, find the index of the placeholder component, move the data of the deleted active component to the index of the placeholder component, and then delete the placeholder component.

7. A component drag-and-drop device for web page documents, characterized in that, include: The document generation department is used to complete the page rendering of the data source to generate web page documents. The data source is a list of multiple components. During page rendering, specific properties are set for the components, and the property value of the specific property is set to the index of the current component in the data source. The event binding section is used to bind mouse event listeners to web page documents. Mouse events include: mouse down, mouse move, and mouse release. The click listener is used to detect when the mouse is pressed, get the clicked node, and find the properties of the component containing the node. The component activation section is used to read the index of the component's data source from the property when the component's property is found, set it as the active component, add the data of the placeholder component at the position after the index, and update the data source. The motion monitoring unit is used to detect mouse movement, calculate the offset of the mouse position, move the placeholder component in the data source according to the offset and direction, and update the data source. The release listener is used to detect when the mouse is released, move the data of the active component to the index of the placeholder component, and update the data source. The web page document is refreshed in real time each time the data source is updated, thus enabling component drag-and-drop.

8. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the component drag-and-drop method according to any one of claims 1 to 6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the steps of the component drag-and-drop method according to any one of claims 1 to 6.

Images