Tree component node processing method and device, equipment and storage medium

Abstract

The invention provides a tree component node processing method and device, equipment and a storage medium, and relates to the technical field of front-end development, the tree component node processing method comprises the following steps: in response to monitoring of a dragging operation of dragging a first node in a source tree component into a target tree component, triggering the target tree component to enter a dragging state; determining a placement position of the first node in the target tree component in response to detection of stopping of the dragging operation; in response to detecting a release operation for the first node, the first node is placed at the placement location. According to the method, node interaction between different tree components can be realized in a dragging mode, the operation mode is convenient and rapid, and the development efficiency can be effectively improved.

Description

Technical Field

[0001] The present invention relates to the field of front-end development technology, and in particular to a method, device, equipment and storage medium for processing tree component nodes. Background Art

[0002] With the rapid development of the Internet and big data, tree components containing multi-type and multi-level data are used to manage page data in the front-end interactive pages of many systems.

[0003] Currently, for each node in a tree component, you can drag and drop the node within the tree component. However, when interacting with external tree components or modules, you need to interact with the nodes through background data communication. The interaction method is not convenient enough, which reduces development efficiency. Summary of the invention

[0004] The purpose of the present invention is to provide a method, device, equipment and storage medium for processing tree component nodes to solve the problem that the current tree component is not convenient enough when interacting with external tree components or modules, resulting in reduced development efficiency.

[0005] In order to achieve the above object, the technical solution adopted by the present invention is as follows:

[0006] A method for processing tree component nodes, comprising: in response to monitoring a drag operation of dragging a first node in a source tree component into a target tree component, triggering the target tree component to enter a drag state; in response to detecting that the drag operation stops, determining a placement position of the first node in the target tree component; in response to detecting a release operation for the first node, placing the first node at the placement position.

[0007] According to the above technical means, since node interaction between different tree components can be achieved by dragging and dropping, the operation is convenient and fast, therefore, it can effectively improve development efficiency and help improve the interactive experience of the tree component data dragging function.

[0008] Further, in response to detecting that the drag operation stops, determining the placement position of the first node in the target tree component, including: determining whether the target tree component is an empty tree; if the target tree component is not an empty tree, then in response to detecting that the drag operation stops, determining the second node in the target tree component corresponding to the current position of the first node; based on the current position of the first node and the position of the second node, determining the placement position of the first node in the target tree component; if the target tree component is an empty tree, then in response to detecting that the drag operation stops, determining the placement position of the first node in the target tree component to be the current position of the first node.

[0009] Further, based on the current position of the first node and the position of the second node, the placement position of the first node in the target tree component is determined, including: if the current position of the first node is above the position of the second node, the placement position of the first node in the target tree component is determined to be above the position of the second node, and the first node and the second node are nodes of the same level; if the current position of the first node is below the position of the second node, the placement position of the first node in the target tree component is determined to be below the position of the second node, and the first node and the second node are nodes of the same level; if the current position of the first node is at the position of the second node, the placement position of the first node in the target tree component is determined to be a next-level child node of the second node.

[0010] Further, the target tree component is not an empty tree, and the first node is placed at the placement position, including: determining whether to place the first node at the placement position based on the node data of the first node, the position information of the placement position, and the node data of the second node; if so, placing the first node at the placement position.

[0011] Further, triggering the target tree component to enter the drag state includes: obtaining the first component identifier of the source tree component; determining whether the target tree component receives the first node based on the first component identifier and the second component identifier of the preset tree component that can receive node data corresponding to the target tree component; if so, triggering the target tree component to enter the drag state.

[0012] Furthermore, after placing the first node at the placement position, the processing method of the tree component node also includes: in response to detecting the end of the drag operation, releasing the drag state of the source tree component and the node data of the first node carried by the drag operation, and releasing the drag state and cached data of the target tree component.

[0013] Furthermore, the processing method of the tree component node also includes: in response to detecting the end of the drag operation, executing a callback function corresponding to the source tree component, the callback function is used to execute corresponding code according to subsequent logic, and the subsequent logic includes whether to remove the first node from the source tree component, whether to change the state of the first node, and whether to change at least one of the node data of the first node.

[0014] Furthermore, the property configuration information of the source tree component includes at least a first component identifier, a callback function and a verification function for dragging node data; the property configuration information of the target tree component includes at least a third component identifier of the target tree component, a response event for placing node data and a second component identifier.

[0015] Furthermore, the method for processing the tree component node also includes: in response to monitoring the drag operation of dragging the third node in the non-tree component into the target tree component, using the third node as the new first node, and executing the step of triggering the target tree component to enter the drag state.

[0016] A processing device for tree component nodes includes: a trigger module for triggering the target tree component to enter a dragging state in response to monitoring a drag operation of dragging a first node in a source tree component into a target tree component; a determination module for determining a placement position of the first node in the target tree component in response to detecting that the drag operation stops; and a placement module for placing the first node at the placement position in response to detecting a release operation on the first node.

[0017] Furthermore, the determination module is specifically used to: determine whether the target tree component is an empty tree; if the target tree component is not an empty tree, then in response to detecting that the drag operation has stopped, determine the second node in the target tree component corresponding to the current position of the first node; based on the current position of the first node and the position of the second node, determine the placement position of the first node in the target tree component; if the target tree component is an empty tree, then in response to detecting that the drag operation has stopped, determine the placement position of the first node in the target tree component to be the current position of the first node.

[0018] Further, when the determination module is used to determine the placement position of the first node in the target tree component based on the current position of the first node and the position of the second node, it is specifically used to: if the current position of the first node is above the position of the second node, then the placement position of the first node in the target tree component is determined to be above the position of the second node, and the first node and the second node are nodes of the same level; if the current position of the first node is below the position of the second node, then the placement position of the first node in the target tree component is determined to be below the position of the second node, and the first node and the second node are nodes of the same level; if the current position of the first node is at the position of the second node, then the placement position of the first node in the target tree component is determined to be the next-level child node of the second node.

[0019] Furthermore, the target tree component is not an empty tree, and the placement module is specifically used to: determine whether to place the first node at the placement position based on the node data of the first node, the position information of the placement position and the node data of the second node; if so, place the first node at the placement position.

[0020] Furthermore, the trigger module is specifically used to: obtain the first component identifier of the source tree component; determine whether the target tree component receives the first node based on the first component identifier and the second component identifier of the preset tree component that can receive node data corresponding to the target tree component; if so, trigger the target tree component to enter the drag state.

[0021] Furthermore, the processing device of the tree component node also includes a release module, which is used to release the drag state of the source tree component and the node data of the first node carried by the drag operation in response to detecting the end of the drag operation after the placement module places the first node at the placement position, and release the drag state and cached data of the target tree component.

[0022] Furthermore, the release module is also used to: in response to detecting the end of the drag operation, execute a callback function corresponding to the source tree component, the callback function is used to execute the corresponding code according to subsequent logic, and the subsequent logic includes whether to remove the first node from the source tree component, whether to change the state of the first node, and whether to change at least one of the node data of the first node.

[0023] Furthermore, the property configuration information of the source tree component includes at least a first component identifier, a callback function and a verification function for dragging node data; the property configuration information of the target tree component includes at least a third component identifier of the target tree component, a response event for placing node data and a second component identifier.

[0024] Furthermore, the processing device of the tree component node also includes a processing module for responding to a drag operation of dragging a third node in a non-tree component into a target tree component, using the third node as a new first node, and executing steps to trigger the target tree component to enter a drag state.

[0025] An electronic device includes: a processor, and a memory connected to the processor; the memory stores computer execution instructions; the processor executes the computer execution instructions stored in the memory to implement the tree component node processing method as described above in the present invention.

[0026] A computer-readable storage medium stores computer program instructions. When the computer program instructions are executed, the tree component node processing method of the present invention is implemented.

[0027] A computer program product includes a computer program. When the computer program is executed, the method for processing tree component nodes of the present invention is implemented.

[0028] Beneficial effects of the present invention: The tree component node processing method, device, equipment and storage medium provided by the present invention trigger the target tree component to enter a drag state by responding to monitoring a drag operation of dragging the first node in the source tree component into the target tree component; in response to detecting that the drag operation stops, the placement position of the first node in the target tree component is determined; in response to detecting a release operation on the first node, the first node is placed at the placement position, and node interaction between different tree components can be achieved by dragging. The operation method is convenient and fast, can effectively improve development efficiency, and help to improve the interactive experience of the tree component data dragging function. BRIEF DESCRIPTION OF THE DRAWINGS

[0029] Figure 1 A schematic diagram of an application scenario provided by an embodiment of the present invention;

[0030] Figure 2 A flowchart of a method for processing a tree component node provided by an embodiment of the present invention;

[0031] Figure 3 A flowchart of a method for processing a tree component node provided by another embodiment of the present invention;

[0032] Figure 4 A schematic diagram of an interface for dragging nodes across a tree provided by an embodiment of the present invention;

[0033] Figure 5 A schematic diagram of an interface for dragging nodes across a tree provided by another embodiment of the present invention;

[0034] Figure 6 A schematic diagram of a verification rule corresponding to a drag operation provided by an embodiment of the present invention;

[0035] Figure 7 A schematic diagram of data interaction during the process of dragging a node provided by an embodiment of the present invention;

[0036] Figure 8 A schematic diagram of event logic after the source tree component node is dragged and dropped according to an embodiment of the present invention;

[0037] Fig. 9 A schematic diagram of a target tree component receiving a response event in the process of dragging a node provided by an embodiment of the present invention;

[0038] Fig.10 An overall overview diagram of dragging nodes across a tree provided by an embodiment of the present invention;

[0039] Fig.11 A diagram of specific implementation steps corresponding to a method for processing a tree component node provided by an embodiment of the present invention;

[0040] Fig.12 A schematic diagram of the structure of a tree component node processing device provided by an embodiment of the present invention;

[0041] Fig.13 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0042] The following will describe the embodiments of the present invention with reference to the accompanying drawings and preferred embodiments. Those skilled in the art can easily understand other advantages and effects of the present invention from the contents disclosed in this specification. The present invention can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present invention. It should be understood that the preferred embodiments are only for illustrating the present invention, not for limiting the scope of protection of the present invention.

[0043] It should be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present invention, and thus the drawings only show components related to the present invention rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0044] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in the present invention are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant laws, regulations and standards, and corresponding operation entrances shall be provided for users to choose to authorize or refuse.

[0045] With the rapid development of the Internet and big data, tree components containing multi-type and multi-level data are used to manage page data in the front-end interactive pages of many systems. Among them, there are a large number of demands for dragging nodes within the tree components, that is, the nodes within the tree components will communicate and interact with the nodes of external tree components or modules.

[0046] At present, for each node in the tree component, you can perform node dragging and interaction inside the tree component. For example, Element-Plus (a front-end user interface component library) and Ant-Design (a front-end user interface component library) both provide solutions for node dragging and interaction inside the tree component. When interacting with external tree components or modules, the node interaction needs to be performed through background data communication. The interaction method is not convenient enough, resulting in reduced development efficiency.

[0047] The cross-tree or cross-module node dragging interaction method can more intuitively express the user's intention to operate the data. In intelligent applications, there will be large-scale application scenarios in which data calculation, interface linkage and other functions between modules are realized by freely dragging nodes. The big data involved in each scenario will also be laid out around the tree component method. Therefore, it is urgent to provide a highly convenient and efficient node dragging interaction solution for the interaction between the nodes in the tree component and the nodes of the external tree component or module.

[0048] Based on the above problems, the present invention provides a method for processing tree component nodes. By dragging the nodes in the source tree component into the target tree component, the nodes in the source tree component are placed in the target tree component, and the node interaction between different tree components is achieved by dragging. The operation method is convenient and fast, which can effectively improve the development efficiency and help to improve the interactive experience of the tree component data dragging function.

[0049] The processing method of the tree component node provided by the present invention can be applied to the drag and drop interaction of nodes between tree components and between tree components and other modules. It can be understood that in the application of actual scenarios, especially in most of the current test systems, for example, the test system of the automobile controller unit, a large number of data cross-tree drag functions will be involved. The processing method of the tree component node provided by the present invention can solve the interaction problems of various types of data cross-tree drag, greatly improve the feasibility and practicality of various functions of the test system, and also improve the development efficiency of similar functions of the test system.

[0050] In the following, the application scenario of the solution provided by the present invention is firstly described by way of example.

[0051] Figure 1 Schematic diagram of an application scenario provided by an embodiment of the present invention. Figure 1 As shown, in this application scenario, the user drags the nodes in the tree component A of the test system to the tree component B through the client 101, wherein the tree component A is a tree component for managing test steps, and the tree component B is a tree component for managing test cases. Accordingly, the server 102 places the nodes in the tree component A into the tree component B according to the processing method of the tree component nodes provided by the present invention, and displays the tree component B to the user through the client 101 after the dragging operation is completed.

[0052] It should be noted that Figure 1 This is only a schematic diagram of an application scenario provided by an embodiment of the present invention. Figure 1 does not limit the equipment included in Figure 1 The positional relationship between the devices is limited.

[0053] The technical solution of the present invention is described in detail below through specific embodiments. It should be noted that the following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments.

[0054] Figure 2 A flowchart of a method for processing a tree component node provided by an embodiment of the present invention. The method for processing a tree component node may be executed by software and / or hardware devices. For example, the hardware device may be a processing device for processing a tree component node, and the processing device for processing a tree component node may be an electronic device or a processing chip in an electronic device. Figure 2 As shown, the method of the embodiment of the present invention includes:

[0055] S201: In response to monitoring a drag operation of dragging a first node in a source tree component into a target tree component, triggering the target tree component to enter a dragging state.

[0056] In an embodiment of the present invention, the source tree component and the target tree component are two independent tree components with a tree structure. Based on business needs, the first node in the source tree component can be dragged into the target tree component. Accordingly, the electronic device executing the embodiment of the present method triggers the target tree component to enter a dragging state in response to monitoring the drag operation of dragging the first node in the source tree component into the target tree component. Exemplarily, the drag operation is triggered by the user using the mouse. When the user drags the first node in the source tree component with the mouse, the mouse moves in each module of the current page. When the mouse drags the first node into the target tree component, the drag operation of dragging the first node into the target tree component can be monitored in the root element event of the target tree component. Specifically, taking the Element-Plus framework as an example, the original tree component of the Element-Plus framework is encapsulated, and the mouse drag entry (dragenter) event can be triggered on the root element block-level tag (div tag) of the target tree component to determine whether the mouse has entered the target tree component from the source tree component by dragging, and the node data required when entering the target tree component (such as the first dragged node and related information of the source tree component, etc.) is recorded at the moment of starting to drag. After the mouse enters the target tree component by dragging, the node drag start (nodedragstart) event inside the target tree component is dynamically triggered, thereby triggering the target tree component to enter the drag state and activating the logic associated with the drag event inside the target tree component.

[0057] Optionally, before dragging the first node in the source tree component, determine whether the source tree component contains nodes. If it contains nodes, the first node in the source tree component can be dragged into the target tree component; if it does not contain nodes, the underlying data node event of the source tree component will not be triggered and the process ends.

[0058] S202: In response to detecting that the dragging operation stops, determine a placement position of the first node in the target tree component.

[0059] Exemplarily, the drag operation is triggered by the user through the mouse. When the first node is moved in the target tree component by dragging the mouse, the node position where the mouse enters (enter) and hovers (hover) can be determined in real time. If the mouse hovers over a node position in the target tree component, that is, the drag operation is stopped, the electronic device executing the embodiment of the present method can determine the placement position of the first node in the target tree component in response to detecting that the drag operation has stopped. For example, the second node in the target tree component corresponding to the current position of the first node can be determined based on the current position of the first node, so that the placement position of the first node in the target tree component can be determined based on the current position of the first node and the position of the second node. As for how to determine the placement position of the first node in the target tree component based on the current position of the first node and the position of the second node, please refer to the subsequent embodiments, which will not be repeated here.

[0060] S203: In response to detecting a release operation for the first node, place the first node at a placement position.

[0061] Exemplarily, the drag operation is triggered by the user through the mouse, and after the user releases the mouse, the drag operation on the first node ends, and the electronic device executing the embodiment of the method places the first node at the placement position in response to detecting the release operation on the first node. Based on the example of step S202, the placement position of the first node in the target tree component is, for example, below the position of the second node, then the first node can be placed below the position of the second node, and the first node and the second node are nodes of the same level.

[0062] Through the above steps S201 to S203, multiple nodes in the source tree component can be dragged into the target tree component to complete the node drag interaction between different tree components. The operation method is convenient and fast, which can improve development efficiency. After the drag operation is completed, the drag state of the source tree component and the node data of the first node carried by the drag operation can be released, and the drag state and cached data of the target tree component can be released.

[0063] It should be noted that the method for processing tree component nodes provided in the embodiment of the present invention is not to insert the nodes in the source tree component into the Document Object Model (DOM) nodes of the target tree component by means of node copying or node cutting, but to drive the refresh rendering of the DOM interface based on the insertion of node data. Therefore, the key duplication problem caused by dragging nodes with the same unique key in different tree components can be avoided.

[0064] The method for processing tree component nodes provided by an embodiment of the present invention responds to monitoring a drag operation of dragging a first node in a source tree component into a target tree component, triggering the target tree component to enter a drag state; responds to detecting that the drag operation stops, determining the placement position of the first node in the target tree component; responds to detecting a release operation on the first node, placing the first node at the placement position, and can implement node interaction between different tree components in a dragging manner. The operation method is convenient and fast, can effectively improve development efficiency, and help to improve the interactive experience of the tree component data dragging function.

[0065] Figure 3 This is a flowchart of a method for processing a tree component node provided by another embodiment of the present invention. Based on the above embodiment, the embodiment of the present invention further illustrates the method for processing a tree component node. Figure 3 As shown, the method of the embodiment of the present invention may include:

[0066] S301: In response to monitoring a drag operation of dragging a first node in a source tree component into a target tree component, obtaining a first component identifier of the source tree component.

[0067] In this step, at the moment of starting to drag the first node in the source tree component, the node data required for entering the target tree component is recorded, and the node data includes, for example, the first node being dragged and the first component identifier of the source tree component. Therefore, the electronic device executing the embodiment of the method can obtain the first component identifier of the source tree component in response to monitoring the drag operation of dragging the first node in the source tree component into the target tree component.

[0068] S302: Determine whether the target tree component receives the first node based on the first component identifier and the second component identifier of the preset tree component that can receive node data and corresponds to the target tree component.

[0069] In this step, the second component identifier of the preset tree component that can receive node data corresponding to the target tree component is configurable to flexibly control the preset tree component that can receive node data of the target tree component, and realize the node dragging interaction between the target tree component and the preset tree component. Exemplarily, if the preset tree component includes multiple, then the second component identifiers of multiple preset tree components can be matched according to the first component identifier of the source tree component to determine whether the multiple second component identifiers contain the first component identifier. If the first component identifier is included in the multiple second component identifiers, it can be determined that the target tree component receives the first node, and step S303 is executed; if the first component identifier is not included in the multiple second component identifiers, it can be determined that the target tree component does not receive the first node, and the target tree component will not be triggered to enter the drag state, and S311 is executed, and in response to detecting the release operation for the first node, the dragging operation ends.

[0070] Optionally, the property configuration information of the source tree component includes at least a first component identifier of the source tree component, a callback function corresponding to the source tree component, and a verification function for dragging node data; the property configuration information of the target tree component includes at least a third component identifier of the target tree component, a response event for placing node data, and a second component identifier of a preset tree component corresponding to the target tree component that can receive node data.

[0071] Exemplarily, the attribute configuration information of the source tree component and the attribute configuration information of the target tree component are both configurable. Among them, the callback function corresponding to the source tree component is used to execute the corresponding code according to the subsequent logic after the drag operation is completed, for example, to remove the first node from the source tree component, change the state of the first node, or change the node data of the first node, etc.; the verification function of the dragged node data is used to verify whether the node data can be dragged from the source tree component; the response event of placing the node data is used to determine the response event of the target tree component in the process of receiving the dragged node data, such as the drag entry event, the drag start event, the drag stay event, and the allow placement event, etc. In addition, the verification rules when placing the first node in the target tree component and the callback function corresponding to the target tree component after placing the first node in the target tree component (such as for releasing the drag state and cached data of the target tree component) can also be configured, wherein the specific verification rules can refer to the subsequent embodiments.

[0072] S303: If yes, trigger the target tree component to enter the dragging state.

[0073] In this step, after determining that the target tree component receives the first node, the target tree component is triggered to enter a dragging state.

[0074] Steps S301 to S303 can be understood as verifying the drag operation through the verification rules of the tree component dimension. In addition to the verification rules of the tree component dimension, the verification rules can also include the verification rules of the module dimension and the verification rules of the function callback dimension. For the specific verification rules of the module dimension and the verification rules of the function callback dimension, please refer to the subsequent embodiments.

[0075] S304: Determine whether the target tree component is an empty tree.

[0076] In this step, whether the target tree component is an empty tree can be determined based on whether the target tree component contains nodes. If the target tree component is not an empty tree, execute step S305; if the target tree component is an empty tree, execute step S308. This step can be understood as determining whether to execute the verification rules of the function callback dimension through the verification rules of the module dimension, that is, when the target tree component is not an empty tree, the verification rules of the function callback dimension are executed, and when the target tree component is an empty tree, the verification rules of the function callback dimension do not need to be executed.

[0077] S305. In response to detecting that the dragging operation stops, determine the second node in the target tree component corresponding to the current position of the first node; based on the current position of the first node and the position of the second node, determine the placement position of the first node in the target tree component, and continue to execute step S306.

[0078] In this step, when it is determined that the target tree component is not an empty tree, when it is detected that the drag operation stops, the second node in the target tree component corresponding to the current position of the first node can be determined based on the current position of the first node, and then the placement position of the first node in the target tree component can be determined based on the current position of the first node and the position of the second node.

[0079] Optionally, determining the placement position of the first node in the target tree component based on the current position of the first node and the position of the second node may include: if the current position of the first node is above the position of the second node, determining the placement position of the first node in the target tree component to be above the position of the second node, and the first node and the second node are nodes of the same level; if the current position of the first node is below the position of the second node, determining the placement position of the first node in the target tree component to be below the position of the second node, and the first node and the second node are nodes of the same level; if the current position of the first node is at the position of the second node, determining the placement position of the first node in the target tree component to be a next-level child node of the second node.

[0080] In this embodiment, the first node can be placed above, below, or as a next-level child node of the second node in the target tree component. Taking placing the first node below the second node in the target tree component as an example, Figure 4 A schematic diagram of an interface for dragging nodes across a tree provided by an embodiment of the present invention, such as Figure 4 As shown, the operation interface of dragging nodes across the tree is shown, for example, the first node "model variable 1-1" in the source tree component 401 is dragged to the target tree component 402. According to the current position of the first node in the target tree component 402, it can be determined that the second node in the target tree component 402 corresponding to the current position of the first node is "mapping 1-1". The current position of the first node "model variable 1-1" is below the position of the second node "mapping 1-1", so the placement position of "model variable 1-1" in the target tree component can be determined to be below the position of the second node "mapping 1-1" (i.e., the position pointed by the arrow).

[0081] refer to Figure 4 It can be understood that the dragged node data is not limited to the level or the node type, and can be dragged across trees. After dragging the node from the source tree component to the target tree component, it is only necessary to verify the node data in the verification rule of the target tree component and match the first component identifier of the source tree component. When the node data meets the logical requirements, the dragged node data can be inserted into the target tree component after the code execution is completed, effectively breaking the limitation that the existing tree component nodes cannot be dragged across trees.

[0082] S306: Determine whether to place the first node at the placement position according to the node data of the first node, the position information of the placement position, and the node data of the second node.

[0083] This step can be understood as determining whether to place the first node at the placement position through the verification rules of the function callback dimension. Exemplarily, the drag operation is triggered by the user through the mouse. When the mouse hovers over the first node at the placement position in the target tree component, it can be determined whether to place the first node at the placement position based on the node data of the first node, the position information of the placement position, and the node data of the second node. If it is determined to place the first node at the placement position, execute step S307; if it is determined not to place the first node at the placement position, execute S311, and in response to detecting a release operation on the first node, end the drag operation.

[0084] S307: If yes, in response to detecting a release operation for the first node, place the first node at the placement position.

[0085] In this step, after determining to place the first node at the placement position, in response to detecting a release operation for the first node, such as releasing the mouse, the first node is placed at the placement position, completing the cross-tree drag interaction of the first node. When the drag operation is detected to be finished, step S310 may be executed. Figure 5 A schematic diagram of an interface for dragging nodes across a tree provided by another embodiment of the present invention is shown in FIG. Figure 5 As shown, based on Figure 4 ,exist Figure 4 The first node “model variable 1-1” dragged from the source tree component 401 is placed at the placement position in the target tree component 402. The first node “model variable 1-1” and the second node “mapping 1-1” are nodes at the same level.

[0086] S308. In response to detecting that the dragging operation stops, determine the placement position of the first node in the target tree component as the current position of the first node, and continue to execute step S309.

[0087] In this step, when it is determined that the target tree component is an empty tree, when it is detected that the drag operation stops, the placement position of the first node in the target tree component is determined to be the current position of the first node, and step S309 is continued. It can be understood that when it is determined that the target tree component is an empty tree, the verification rule of the function callback dimension is not executed.

[0088] S309: In response to detecting a release operation for the first node, place the first node at the placement position.

[0089] In this step, when a release operation on the first node is detected, such as releasing the mouse, the first node is placed at the placement position. When the end of the drag operation is detected, step S310 may be executed.

[0090] S310: In response to detecting that the drag operation ends, releasing the drag state of the source tree component and the node data of the first node carried by the drag operation, and releasing the drag state and cached data of the target tree component.

[0091] Exemplarily, the drag operation is triggered by the user through the mouse. Taking the Element-Plus framework as an example, it can be determined whether the mouse has left the target tree component according to the attribute mark of the DOM node. If so, it means that the drag operation is over, and the reset drag state events of the source tree component and the target tree component are executed respectively, the drag state of the source tree component and the node data of the first node carried by the drag operation are released, and the drag state and cached data of the target tree component are released.

[0092] Optionally, when the mouse does not enter any tree component that can receive the dragged node data after dragging the node from the source tree component, when the mouse is released (i.e., the drag end event), the drag state and dragged node data in the source tree component need to be released.

[0093] Optionally, in response to detecting the end of the drag operation, a callback function corresponding to the source tree component is executed, and the callback function is used to execute corresponding code according to subsequent logic, and the subsequent logic includes at least one of whether to remove the first node from the source tree component, whether to change the state of the first node, and whether to change the node data of the first node.

[0094] Exemplarily, the callback function corresponding to the source tree component is configurable as the attribute configuration information of the source tree component. The callback function corresponding to the tree component is used to execute the corresponding code according to the subsequent logic, such as removing the first node from the source tree component, changing the state of the first node, or changing the node data of the first node, etc. The corresponding subsequent logic can be set according to business needs.

[0095] The method for processing tree component nodes provided by an embodiment of the present invention, in response to monitoring a drag operation of dragging a first node in a source tree component into a target tree component, determines whether the target tree component receives the first node according to the first component identifier of the source tree component, that is, performs a tree component dimension verification; if it is determined that the target tree component receives the first node, triggers the target tree component to enter a drag state, determines whether the target tree component is an empty tree, that is, performs a module dimension verification to determine whether to execute a function callback dimension verification; if the target tree component is not an empty tree, in response to detecting that the drag operation stops, determines the second node in the target tree component corresponding to the current position of the first node, and based on the current position of the first node and the position of the second node , determine the placement position of the first node in the target tree component, determine whether to place the first node at the placement position according to the node data of the first node, the position information of the placement position and the node data of the second node, that is, perform a function callback dimension check, if it is determined to place the first node at the placement position, then in response to detecting a release operation for the first node, place the first node at the placement position; if the target tree component is an empty tree, then in response to detecting a release operation for the first node, place the first node at the current position of the first node; in response to detecting the end of the drag operation, release the drag state of the source tree component and the node data of the first node carried by the drag operation, and release the drag state and cached data of the target tree component. In the embodiment of the present invention, node interaction between different tree components can be realized in a drag-and-drop manner, the operation method is convenient and fast, and the development efficiency can be effectively improved. In the drag process, the drag-and-drop check rules of multi-dimensional custom drag nodes are executed, which can effectively improve the freedom, reliability and effectiveness of cross-tree node drag interaction.

[0096] Based on the above embodiment, optionally, in response to monitoring a drag operation of dragging a third node in a non-tree component into a target tree component, the third node is used as a new first node, and the above S301 or steps after S301 are executed.

[0097] It can be understood that when dragging the third node in the non-tree component into the target tree component, the third node can be used as the new first node, and the above-mentioned steps S301 to S310 are executed. That is, the processing logic of dragging the third node in the non-tree component into the target tree component is similar to the processing logic of dragging the first node in the source tree component into the target tree component. According to the dragging state and dragging data when dragging in the target tree component, the node drag start (treeNodeDragStart) event of the target tree component is triggered, and the entire associated event and rule verification is entered until the dragging action is completed.

[0098] Based on the above embodiments, Figure 6 A schematic diagram of a verification rule corresponding to a drag operation provided by an embodiment of the present invention is shown in FIG. Figure 6 As shown, the verification rules include verification rules of tree component dimension, verification rules of module dimension and verification rules of function callback dimension. Among them, the verification rules of tree component dimension are used to set a unique component identifier (such as represented by treeTypeKey) and a unique component identifier of a preset tree component that can receive node data for each tree component; when dragging node data to move on the target tree component, it is preferentially matched in the preset tree component that can receive node data corresponding to the target tree component according to the unique component identifier (treeTypeKey) of the source tree component. The verification rules of module dimension are used to monitor the scope of the drag operation on the block-level tag of the DOM root element of the tree component in the module. If it is a tree component containing node data (i.e., a non-empty tree), the verification rules of the tree component dimension and the verification rules of the function callback dimension will be executed for verification; if the tree component is an empty tree, the verification rules of the tree component dimension will be executed for verification. This dimension will also provide real-time feedback on whether the drag entry event of the current tree component is entered and whether the drag leaving event of the current tree component is left, so as to verify whether the event cache data executed when it is the target tree component is released. The verification rules of the function callback dimension are used to trigger the allowDrop callback function when the mouse moves over other nodes during the dragging process after selecting the first node. The verification is performed through data verification, such as verification based on the node data field (used to determine whether the dragged node is allowed to be placed), whether to perform a secondary pop-up box logic check in the subsequent stage after the dragging operation ends (used for business logic processing in the subsequent stage), and verification based on the mouse placement position (used to determine the placement position of the dragged node).

[0099] Based on the above embodiments, Figure 7 A schematic diagram of data interaction during the dragging of a node provided by an embodiment of the present invention is shown in FIG. Figure 7 As shown, taking the example that the source tree component contains 3 first nodes and the target tree component contains 3 second nodes, the attribute configuration information of the source tree component and the attribute configuration information of the target tree component can be configured, and the attribute configuration information of the source tree component at least includes the first component identifier of the source tree component, the callback function corresponding to the source tree component, and the verification function of the dragged node data; the attribute configuration information of the target tree component at least includes the third component identifier of the target tree component, the response event for placing the node data, and the second component identifier of the preset tree component corresponding to the target tree component that can receive the node data. Among them, in high latitude, that is, whether to enter the target tree component determines how to execute subsequent events, and the unique identifier of the tree component (i.e., the component identifier) ​​will directly determine whether the dragging response of the node is allowed between the two tree components, and the acceptable (accept) attribute value of the target tree component is the unique identifier of the preset tree component used to configure the receivable node data. When the drag operation ends, the dragged node can be checked according to the position when the mouse is released, and then the dragged node is placed at the determined placement position according to the node in the target tree component where the placement position is found, and finally the drag state and data of the source tree component and the target tree component are released respectively. At this point, the node has completed the interactive behavior allowed by the rules during the drag process.

[0100] Based on the above embodiments, Figure 8 A schematic diagram of event logic after the dragging of a source tree component node is completed according to an embodiment of the present invention, such as Figure 8 As shown, after the dragging of the nodes of the source tree component is completed, the nodes dragged from the source tree component are placed in the target tree component according to the verification rules, and in the source tree component, a drag-end callback function is triggered to execute the corresponding code according to the subsequent logic. The subsequent logic includes whether to remove the first node from the source tree component, whether to change the state of the first node and whether to change at least one of the node data of the first node, and trigger the release of the dragged state and dragged node data of the source tree component.

[0101] Based on the above embodiments, Fig. 9 A schematic diagram of a target tree component receiving a response event in the process of dragging a node provided by an embodiment of the present invention, such as Fig. 9As shown, some major event configurations involved on the target tree component side are shown, including: dragging a node from the source tree component into the target tree component, the target tree component identifying the unique identifier of the source tree component, determining whether the currently dragged node can be placed, and then verifying some rules involved in the field values ​​inside the dragged node data, until the dragging operation is ended and the dragged node is placed in the target tree component.

[0102] Based on the above embodiments, Fig.10 An overall overview diagram of dragging nodes across a tree provided by an embodiment of the present invention, such as Fig.10 As shown, the overall functional structure of the embodiment of the present invention is based on the source tree component and the target tree component, and the necessary attribute values ​​are set accordingly. The source tree component must be configured with a unique component identifier, a callback function for the end of dragging, and a verification function for placing data. The target tree component must be configured with a unique component identifier, a response event for placing data, and a unique identifier of the source tree component that can receive data. During the node dragging process, the source tree component mainly provides node data input and dynamically triggers the dragging event of the target tree component, while the target tree component mainly responds to events from the start of node dragging of the source tree component to entering the target tree component.

[0103] Based on the above embodiments, Fig.11 A specific implementation step diagram corresponding to the method for processing a tree component node provided by an embodiment of the present invention is shown in FIG. Fig.11 As shown, the specific implementation steps may include:

[0104] Step S1101: Create a source tree component page and a target tree component page respectively, and configure the attribute configuration information of the source tree component and the attribute configuration information of the target tree component.

[0105] Among them, the property configuration information of the source tree component may include the first component identifier of the source tree component, the callback function corresponding to the source tree component after the dragging is completed, and the verification rule method of the dragged node data (i.e., the verification function); the property configuration information of the target tree component may include the third component identifier of the target tree component, the verification rule method when placing the node of the source tree component (corresponding to the verification rules of the three dimensions in the above embodiment), and the callback method after placing the node of the source tree component (used to release the drag status and cached data of the target tree component).

[0106] Step S1102: The user drags any draggable node of the source tree component to any external target tree component. When dragging a node from the source tree component, the draggable node can be checked by a check rule method of the dragged node data.

[0107] Step S1103: When the user drags the data into the target tree component, the target tree component executes the built-in method upon entry, triggering the built-in dragging state of the target tree component.

[0108] Step S1104: if the dragging action is in the target tree component, the component identifier of the source tree component is verified. If the verification passes, the tree component node dragging start time is triggered, and the built-in dragging state of the target tree component is enabled.

[0109] Step S1105: The user maintains the dragging action and moves in the target tree component. Based on the mouse position, the node data at that position and the dragged node data are substituted, and the verification rule method for placing the node of the source tree component is called to determine whether it can be placed based on the custom verification rules in the verification rule method.

[0110] Step S1106: After the dragging or placing action is completed, the target tree component executes the callback method after placing the node of the source tree component, and the source tree component executes the callback function after the dragging is completed.

[0111] Step S1107: Finally, the built-in methods of the source tree component and the target tree component, ie, the processing function for ending the drag and drop of other tree nodes (dropEndWithOtherTreeNode), are respectively executed to release the dragging state of the source tree component and the target tree component.

[0112] Through the above implementation steps, users can complete a cross-tree drag and drop behavior function with custom validation rules.

[0113] The following are embodiments of the device of the present invention, which can be used to implement the method embodiments of the present invention. For details not disclosed in the device embodiments of the present invention, please refer to the method embodiments of the present invention.

[0114] Fig.12 A schematic diagram of the structure of a tree component node processing device provided by an embodiment of the present invention. Fig.12 As shown, the tree component node processing device 1200 of the embodiment of the present invention includes: a trigger module 1201, a determination module 1202 and a placement module 1203. Among them:

[0115] The trigger module 1201 is used to trigger the target tree component to enter a dragging state in response to monitoring a dragging operation of dragging the first node in the source tree component into the target tree component.

[0116] The determination module 1202 is used to determine the placement position of the first node in the target tree component in response to detecting that the drag operation stops.

[0117] The placement module 1203 is configured to place the first node at a placement position in response to detecting a release operation for the first node.

[0118] Further, the determination module 1202 is specifically used to: determine whether the target tree component is an empty tree; if the target tree component is not an empty tree, then in response to detecting that the drag operation has stopped, determine the second node in the target tree component corresponding to the current position of the first node; based on the current position of the first node and the position of the second node, determine the placement position of the first node in the target tree component; if the target tree component is an empty tree, then in response to detecting that the drag operation has stopped, determine the placement position of the first node in the target tree component to be the current position of the first node.

[0119] Further, when the determination module 1202 is used to determine the placement position of the first node in the target tree component based on the current position of the first node and the position of the second node, it is specifically used to: if the current position of the first node is above the position of the second node, then the placement position of the first node in the target tree component is determined to be above the position of the second node, and the first node and the second node are nodes of the same level; if the current position of the first node is below the position of the second node, then the placement position of the first node in the target tree component is determined to be below the position of the second node, and the first node and the second node are nodes of the same level; if the current position of the first node is at the position of the second node, then the placement position of the first node in the target tree component is determined to be the next-level child node of the second node.

[0120] Further, the target tree component is not an empty tree, and the placement module 1203 is specifically used to: determine whether to place the first node at the placement position according to the node data of the first node, the position information of the placement position and the node data of the second node; if so, place the first node at the placement position.

[0121] Further, the trigger module 1201 is specifically used to: obtain the first component identifier of the source tree component; determine whether the target tree component receives the first node based on the first component identifier and the second component identifier of the preset tree component that can receive node data corresponding to the target tree component; if so, trigger the target tree component to enter the drag state.

[0122] Furthermore, the processing device 1200 of the tree component node also includes a release module (not shown in the figure), which is used to release the drag state of the source tree component and the node data of the first node carried by the drag operation in response to detecting the end of the drag operation after the placement module 1203 places the first node at the placement position, and release the drag state and cached data of the target tree component.

[0123] Furthermore, the release module is also used to: in response to detecting the end of the drag operation, execute a callback function corresponding to the source tree component, the callback function is used to execute the corresponding code according to subsequent logic, and the subsequent logic includes whether to remove the first node from the source tree component, whether to change the state of the first node, and whether to change at least one of the node data of the first node.

[0124] Furthermore, the property configuration information of the source tree component includes at least a first component identifier, a callback function and a verification function for dragging node data; the property configuration information of the target tree component includes at least a third component identifier of the target tree component, a response event for placing node data and a second component identifier.

[0125] Furthermore, the processing device 1200 for the tree component node also includes a processing module (not shown in the figure), which is used to respond to the drag operation of dragging the third node in the non-tree component into the target tree component, use the third node as the new first node, and execute the step of triggering the target tree component to enter the drag state.

[0126] The device of the embodiment of the present invention can be used to execute the technical solution of the cloud server in any of the above-mentioned method embodiments. Its implementation principle and technical effects are similar and will not be repeated here.

[0127] Fig.13 This is a schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. Fig.13 As shown, the electronic device 1300 may include: at least one processor 1301 and a memory 1302 .

[0128] The memory 1302 is used to store programs. Specifically, the programs may include program codes, and the program codes include computer-executable instructions.

[0129] The memory 1302 may include a high-speed random access memory (RAM), and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory.

[0130] The processor 1301 is used to execute the computer-executable instructions stored in the memory 1302 to implement the method for processing the tree component nodes described in the aforementioned method embodiment. The processor 1301 may be a central processing unit (CPU), or an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present invention. Specifically, when implementing the method for processing the tree component nodes described in the aforementioned method embodiment, the electronic device may be, for example, an electronic device with processing functions such as a server.

[0131] Optionally, the electronic device 1300 may further include a communication interface 1303. In a specific implementation, if the communication interface 1303, the memory 1302 and the processor 1301 are implemented independently, the communication interface 1303, the memory 1302 and the processor 1301 may be interconnected through a bus and communicate with each other. The bus may be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The bus may be divided into an address bus, a data bus, a control bus, etc., but it does not mean that there is only one bus or one type of bus.

[0132] Optionally, in a specific implementation, if the communication interface 1303, the memory 1302 and the processor 1301 are integrated on a chip, the communication interface 1303, the memory 1302 and the processor 1301 can communicate through an internal interface.

[0133] The present invention also provides a computer-readable storage medium, in which computer program instructions are stored. When a processor executes the computer program instructions, the above-mentioned tree component node processing method is implemented.

[0134] The present invention also provides a computer program product, including a computer program, which implements the above-mentioned tree component node processing method when executed by a processor.

[0135] The computer-readable storage medium mentioned above can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read only memory (EEPROM), erasable programmable read only memory (EPROM), programmable read only memory (PROM), read only memory (ROM), magnetic storage, flash memory, magnetic disk or optical disk. The readable storage medium can be any available medium that can be accessed by a general or special-purpose computer.

[0136] An exemplary readable storage medium is coupled to the processor so that the processor can read information from the readable storage medium and write information to the readable storage medium. Of course, the readable storage medium can also be a component of the processor. The processor and the readable storage medium can be located in a dedicated integrated circuit. Of course, the processor and the readable storage medium can also exist as discrete components in the processing device of the tree component node.

[0137] Those skilled in the art can understand that all or part of the steps of implementing the above-mentioned method embodiments can be completed by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When the program is executed, the steps of the above-mentioned method embodiments are executed; and the aforementioned storage medium includes: ROM, RAM, disk or optical disk and other media that can store program codes.

[0138] Finally, it should be noted that the above embodiments are only preferred embodiments for fully illustrating the present invention, and the protection scope of the present invention is not limited thereto. Any equivalent substitution or change made by a person skilled in the art based on the present invention is within the protection scope of the present invention.

Claims

1. A method for processing tree component nodes, characterized in that: include: In response to monitoring a drag operation of dragging a first node in a source tree component into a target tree component, triggering the target tree component to enter a drag state; In response to detecting that the dragging operation stops, determining a placement position of the first node in the target tree component; In response to detecting a release operation for the first node, the first node is placed at the placement location.

2. The method for processing tree component nodes according to claim 1, characterized in that: In response to detecting that the dragging operation stops, determining the placement position of the first node in the target tree component includes: Determine whether the target tree component is an empty tree; If the target tree component is not an empty tree, in response to detecting that the dragging operation stops, determining a second node in the target tree component corresponding to the current position of the first node; and determining a placement position of the first node in the target tree component based on the current position of the first node and the position of the second node; If the target tree component is an empty tree, in response to detecting that the drag operation stops, determining the placement position of the first node in the target tree component as the current position of the first node.

3. The method for processing tree component nodes according to claim 2, characterized in that: The step of determining the placement position of the first node in the target tree component based on the current position of the first node and the position of the second node includes: If the current position of the first node is above the position of the second node, then determining that the placement position of the first node in the target tree component is above the position of the second node, and the first node and the second node are nodes of the same level; If the current position of the first node is below the position of the second node, then determining that the placement position of the first node in the target tree component is below the position of the second node, and the first node and the second node are nodes of the same level; If the current position of the first node is located at the position of the second node, the placement position of the first node in the target tree component is determined to be a next-level child node of the second node.

4. The method for processing tree component nodes according to claim 2, characterized in that: The target tree component is not an empty tree, and placing the first node at the placement position includes: Determining whether to place the first node at the placement position according to the node data of the first node, the position information of the placement position, and the node data of the second node; If so, the first node is placed at the placement position.

5. The method for processing a tree component node according to any one of claims 1 to 4, characterized in that: The triggering the target tree component to enter the drag state includes: Obtaining a first component identifier of the source tree component; Determine whether the target tree component receives the first node according to the first component identifier and the second component identifier of the preset tree component that can receive node data corresponding to the target tree component; If so, the target tree component is triggered to enter the dragging state.

6. The method for processing tree component nodes according to claim 5, characterized in that: After placing the first node at the placement position, the method further includes: In response to detecting that the drag operation ends, the drag state of the source tree component and the node data of the first node carried by the drag operation are released, and the drag state and cached data of the target tree component are released.

7. The method for processing tree component nodes according to claim 6, characterized in that: Also includes: In response to detecting the end of the drag operation, a callback function corresponding to the source tree component is executed, and the callback function is used to execute corresponding code according to subsequent logic, and the subsequent logic includes at least one of whether to remove the first node from the source tree component, whether to change the state of the first node, and whether to change the node data of the first node.

8. The method for processing tree component nodes according to claim 7, characterized in that: The property configuration information of the source tree component includes at least the first component identifier, the callback function and the verification function of the dragged node data; the property configuration information of the target tree component includes at least the third component identifier of the target tree component, the response event for placing the node data and the second component identifier.

9. The method for processing a tree component node according to any one of claims 1 to 4, characterized in that: Also includes: In response to monitoring a drag operation of dragging a third node in a non-tree component into the target tree component, the third node is used as a new first node, and the step of triggering the target tree component to enter a drag state is performed.

10. A processing device for a tree component node, characterized in that: include: A trigger module, configured to trigger the target tree component to enter a dragging state in response to monitoring a dragging operation of dragging a first node in a source tree component into a target tree component; a determination module, configured to determine a placement position of the first node in the target tree component in response to detecting that the dragging operation stops; A placement module is configured to place the first node at the placement position in response to detecting a release operation for the first node.

11. An electronic device, characterized in that: include: A processor, and a memory communicatively connected to the processor; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory to implement the method for processing a tree component node according to any one of claims 1 to 9.

12. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer program instructions, and when the computer program instructions are executed, the method for processing a tree component node according to any one of claims 1 to 9 is implemented.

13. A computer program product, comprising a computer program, characterized in that When the computer program is executed, the method for processing a tree component node according to any one of claims 1 to 9 is implemented.

Images