Tree control interaction method and device supporting cross-level dragging

Abstract

The invention relates to the technical field of computer software, and particularly provides a tree control interaction method and device supporting cross-level dragging, and the method comprises the following steps: S1, triggering a dragging operation by a user; s2, recording information of a dragged node; s3, calculating a target position; s4, judging the legality of the target position; s5, updating a data structure; s6, displaying an animation effect; s7, processing cross-tree dragging; and S8, completing the operation. Compared with the prior art, the method has the advantages that the defects of an existing tree control in cross-level dragging and cross-tree dragging functions can be overcome, meanwhile, the user experience is improved through an optimized visual feedback mechanism, and the operation requirement in a complex service scene is met.

Description

Technical Field

[0001] The present invention relates to the technical field of computer software, and specifically provides a tree control interaction method and device supporting cross-level dragging. Background Art

[0002] In today's software applications, the tree control, as a common data display form, is used to present data structures with hierarchical relationships, such as folder directories, organizational charts, etc. However, the existing tree controls have obvious limitations in interaction functions. Most traditional tree controls only support simple node expansion and folding operations, and lack support for cross-level dragging and cross-tree dragging of nodes.

[0003] In actual business scenarios, such as in a file management system, a user may need to move a file from one folder to another folder at a different level; in enterprise organizational structure management, it may also be necessary to adjust a department or an employee from one organizational branch to another organizational branch at a different level. However, the existing tree controls cannot efficiently meet these complex operation requirements, resulting in cumbersome operations and low efficiency for users when dealing with such tasks.

[0004] In addition, the visual feedback during the dragging process of the existing tree controls is not friendly enough. It often simply changes the position of the node, lacking smooth animation effects, making it difficult for users to intuitively perceive the process and result of the operation, thus affecting the user experience.

[0005] Therefore, it is of great practical significance to develop a tree control interaction method and system that support cross-level dragging and cross-tree dragging and have good visual feedback. Summary of the Invention

[0006] The present invention aims at the above-mentioned deficiencies of the existing technology and provides a practical tree control interaction method supporting cross-level dragging.

[0007] A further technical task of the present invention is to provide a tree control interaction device supporting cross-level dragging with reasonable design, safety and applicability.

[0008] The technical solution adopted by the present invention to solve its technical problems is as follows:

[0009] A tree control interaction method supporting cross-level dragging has the following steps:

[0010] S1. The user triggers a dragging operation;

[0011] S2. Record the information of the dragged node;

[0012] S3. Calculate the target position;

[0013] S4. Determine the legality of the target position;

[0014] S5. Update the data structure;

[0015] S6. Display the animation effect;

[0016] S7. Handle cross-tree dragging;

[0017] S8. Complete the operation.

[0018] Furthermore, in step S1, when the user presses the left mouse button on a certain node in the tree control interface, the dragging operation is triggered. With the event listening ability of Vue3, a mousedown event listener is added to the node component template.

[0019] Furthermore, in step S2, once the dragging operation is triggered, immediately record the key information of the dragged node;

[0020] First, by accessing the dataset attribute of the node element stored in draggedNode, obtain the custom data attributes of the node, and then store this custom data attribute information in an object.

[0021] Furthermore, in step S3, during the process of the user dragging the node, it is necessary to calculate the position of the mouse pointer in real time to determine the target position where the dragged node is placed;

[0022] First, add a mousemove event listener to the node component template, obtain the clientX and clientY coordinates of the mouse, use the document.querySelectorAll method to obtain all node elements in the tree control, traverse these nodes, and obtain the position information of each node through the getBoundingClientRect method to determine whether the mouse position is within the node range;

[0023] If it is within the range, mark the node as the target position, highlight it by adding the target-position class name, and at the same time update the variable storing the target position.

[0024] Furthermore, in step S4, write an isPositionValid function. The isPositionValid function receives the dragged node information and the target node as parameters. Inside the function, by looping through and checking the identifiers of the dragged node and all its parent nodes, if it is found that the identifier is the same as that of the target node, it means the target position is illegal and return false;

[0025] If no same identifier is found after checking all parent nodes, return true.

[0026] Further, in step S5, if the target position is legal, update the data structure of the tree control and write the updateTreeData function. The updateTreeData function takes the dragged node information and the target node as parameters. First, find the corresponding node in the tree data structure through the identifier of the target node, and then use the filter method of the array to remove the corresponding node from the child node list of the original parent node of the dragged node;

[0027] Finally, add the dragged node to the child node list of the target node and update the parent node identifier of the dragged node.

[0028] Further, in step S6, after completing the data structure update, use transition or CSS animation to display the animation effect of the drag operation;

[0029] In the component template, use dynamic class binding to create a reactive variable isDragged and initialize it to false. At the end of the drag, set isDragged to true and use the setTimeout function to set it back to false after a certain time;

[0030] In CSS, define the transition effect and animation style for the dragged class name.

[0031] Further, in step S7, if cross-tree dragging is involved, cross-tree data synchronization needs to be processed;

[0032] First, write the handleCrossTreeDrag function. The handleCrossTreeDrag function takes the dragged node information and the identifier of the target tree as parameters. Inside the function, use the fetch function to send a cross-tree drag request to the backend server, set the request method to POST, and send the dragged node information and the target tree identifier to the backend as JSON data;

[0033] Judge whether the cross-tree drag is successful according to the response result returned by the backend;

[0034] If successful, update the front-end data;

[0035] If failed, give the corresponding prompt message.

[0036] Further, in step S8, after the cross-level or cross-tree drag operation of the node is completed, write the finishDrag function. In the finishDrag function, remove the temporary styles added during the drag process;

[0037] Use the classList.remove method to remove the "dragging" class name from the dragged node. At the same time, traverse all nodes to remove the "target - position" class name and restore the normal state of the interface.

[0038] An interactive device for a tree control that supports cross - level dragging, comprising: at least one memory and at least one processor;

[0039] The at least one memory is used to store machine - readable programs;

[0040] The at least one processor is used to call the machine - readable program to execute an interactive method for a tree control that supports cross - level dragging.

[0041] Compared with the prior art, an interactive method and device for a tree control that supports cross - level dragging according to the present invention has the following prominent beneficial effects:

[0042] The present invention can solve the deficiencies of existing tree controls in cross - level dragging and cross - tree dragging functions. At the same time, it improves the user experience through an optimized visual feedback mechanism and meets the operation requirements in complex business scenarios.

[0043] (1) Improve operation flexibility: It realizes cross - level dragging and cross - tree dragging of tree nodes, enabling users to freely move nodes in complex tree structures, greatly improving operation flexibility. In a file management system, users can easily move files or folders between different levels and different directories; in organizational structure management, they can also conveniently adjust the positions of departments and employees.

[0044] (2) Enhance user experience: Based on the drag - event distribution mechanism of Vue 3 and the smooth visual feedback combined with transition or CSS animations, users can more intuitively perceive the process and results of operations during the operation, reducing operation confusion and mistakes. The smooth animation effect also makes the operation more fluent and comfortable, improving user satisfaction.

[0045] (3) Improve development efficiency: The interactive method and system of the tree control of the present invention have good scalability and reusability. Developers can easily integrate it into different front - end projects, reducing the workload of repeated development and improving development efficiency. Description of the Drawings

[0046] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following drawings are some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0047] Appended Figure 1 It is a schematic flowchart of an interaction method for a tree control that supports cross - level dragging. Specific implementation manners

[0048] In order to enable those skilled in the art to better understand the solution of the present invention, the present invention will be further described in detail below in conjunction with specific implementation manners. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts fall within the scope of protection of the present invention.

[0049] The following gives a best - mode embodiment:

[0050] Embodiment 1:

[0051] As Figure 1 shown, an interaction method for a tree control that supports cross - level dragging in this embodiment has the following steps:

[0052] S1. The user triggers a dragging operation;

[0053] When the user presses a certain node with the left mouse button on the tree control interface, the dragging operation is triggered. With the event listening ability of Vue3, a mousedown event listener can be added in the node component template.

[0054] S2. Record the information of the dragged node;

[0055] Once the dragging operation is triggered, the system immediately records the key information of the dragged node, such as the unique identifier of the node, the parent node identifier, the level in the tree structure, etc. In the code, by accessing the dataset attribute of the node element stored in draggedNode, the custom data attributes of the node, such as id, parentId, and level, are obtained and stored in an object for subsequent operations.

[0056] S3. Calculate the target position;

[0057] During the process of the user dragging the node, the system needs to calculate the position of the mouse pointer in real time to determine the target position where the dragged node can be placed.

[0058] First, by adding a mousemove event listener in the node component template, obtain the clientX and clientY coordinates of the mouse. Use the document.querySelectorAll method to get all the node elements in the tree control, traverse these nodes, obtain the position information of each node through the getBoundingClientRect method, and determine whether the mouse position is within the node range. If it is within the range, mark the node as the target position, which can be highlighted by adding the target-position class name, and at the same time update the variable storing the target position.

[0059] S4. Judge the legality of the target position;

[0060] The system will perform a legality check on the calculated target position to avoid node placement violating the tree structure rules, such as forming circular references.

[0061] Write an isPositionValid function that receives the dragged node information and the target node as parameters. Inside the function, loop through and check the identifiers of the dragged node and all its parent nodes. If the same identifier as the target node is found, it means the target position is illegal and return false; if no same identifier is found after checking all parent nodes, return true.

[0062] S5. Update the data structure;

[0063] If the target position is legal, the system will update the data structure of the tree control.

[0064] Write an updateTreeData function that receives the dragged node information and the target node as parameters. First, find the corresponding node in the tree data structure through the identifier of the target node.

[0065] Then, remove the node from the child node list of the original parent node of the dragged node, which can be achieved using the filter method of the array.

[0066] Finally, add the dragged node to the child node list of the target node and update the parent node identifier of the dragged node.

[0067] S6. Display the animation effect;

[0068] After completing the data structure update, the system will display the animation effect of the drag operation with the help of transition or CSS animation. In the component template, use dynamic class binding, such as :class=“{'dragged':isDragged}”.

[0069] Create a reactive variable `isDragged` and initialize it to `false`. At the end of the drag, set `isDragged` to `true`, and use the `setTimeout` function to set it back to `false` after a certain period of time.

[0070] In CSS, define the transition effect and animation style for the `dragged` class name, such as setting the movement, fade-in and fade-out effects of the node.

[0071] S7. Handle cross-tree dragging;

[0072] If cross-tree dragging is involved, the system needs to handle cross-tree data synchronization.

[0073] Write the `handleCrossTreeDrag` function, which takes the information of the dragged node and the identifier of the target tree as parameters.

[0074] Inside the function, use the `fetch` function to send a cross-tree drag request to the backend server. Set the request method to `POST`, and send the information of the dragged node and the target tree identifier to the backend as JSON data. According to the response result returned by the backend, determine whether the cross-tree drag is successful.

[0075] If successful, update the frontend data; if failed, give the corresponding prompt message.

[0076] S8. Complete the operation;

[0077] After the above steps, the cross-level or cross-tree drag operation of the node is completed. Write the `finishDrag` function, and in this function, remove the temporary styles added during the drag process.

[0078] Use the `classList.remove` method to remove the `dragging` class name from the dragged node, and at the same time traverse all nodes to remove the `target-position` class name to restore the normal state of the interface.

[0079] The method of this application adopts three parts: the multi-level drag and cross-tree interaction method, the drag event distribution mechanism based on Vue 3, and the smooth visual feedback implemented by combining `transition` or CSS animation, as follows:

[0080] The implementation of the multi-level drag and cross-tree interaction method is divided into three aspects:

[0081] (1) Data structure design: Adopt a data structure that combines an adjacency list and a hash table to store tree-shaped data. Each node contains information such as a unique identifier, node name, parent node identifier, and child node list. The adjacency list is used to represent the parent-child relationship between nodes, and the hash table is used to quickly locate nodes, facilitating data search and update during drag operations.

[0082] (2) Implementation of cross - level dragging: When the user triggers the dragging operation of a node, the system first records the information of the dragged node. During the dragging process, the relative position relationship between the mouse position and each target node is calculated in real - time to determine the target positions where the dragged node can be placed. For cross - level dragging, the system checks the legality of the target position to ensure that no circular references or business rules are violated. If the target position is legal, at the end of the dragging, the tree - shaped data structure is updated, the parent node information of the dragged node is adjusted, and the child node list of the relevant nodes is updated.

[0083] (3) Implementation of cross - tree dragging: In a scenario that supports multiple trees, the implementation principle of cross - tree dragging is similar to that of cross - level dragging. The system will identify the tree where the dragged node is located and the target tree, and in real - time determine the placeable positions in the target tree during the dragging process. When the dragging ends and the target position is legal, the dragged node is removed from the original tree and added to the corresponding position in the target tree, and the data structures of both trees are updated.

[0084] Based on the drag event distribution mechanism of Vue 3 to support the dynamic position calculation of nested nodes, as follows:

[0085] (1) Event listening and capturing: Using the event listening mechanism of Vue 3, listen for the mouse down, move, and up events on the root node of the tree - shaped control. When the user presses the left mouse button to select a node, the drag start event is triggered, and the initial position and relevant information of the dragged node are recorded. During the mouse movement, continuously listen for the change of the mouse position and trigger the drag move event. When the user releases the left mouse button, the drag end event is triggered.

[0086] (2) Event distribution and handling: Through a custom event distribution function, the captured drag events are distributed to the corresponding nested nodes. During the distribution process, according to the hierarchical relationship and position information of the nodes, the relative position of each node during the dragging process is calculated dynamically. For nodes with deeper nesting, the system will perform the position calculation recursively to ensure that each node can accurately respond to the drag event.

[0087] (3) Dynamic position update: During the dragging process, the position of the dragged node is updated in real - time according to the movement of the mouse. At the same time, in order to ensure the smoothness of the user operation, throttling or debouncing techniques are adopted to reduce unnecessary position calculations and redrawing operations.

[0088] Combined with transition or CSS animation to achieve smooth visual feedback:

[0089] (1) Drag start animation: When the user starts dragging a node, change the style of the dragged node, such as transparency, size, shadow, etc., through transition or CSS animation to visually distinguish it from other nodes and enhance the user's operation perception.

[0090] (2) Drag process animation: During the dragging process, use CSS animation to achieve the follow - up effect of the dragged node so that it can smoothly follow the mouse movement. At the same time, for the placeholder at the target position, the change of its position can also be shown through animation effects to prompt the user about the available placement positions.

[0091] (3) Drag end animation: When the dragging ends and the node is successfully placed at the target position, show the final positioning process of the node, such as fading in, scaling, etc., through animation effects so that the user can more intuitively see the operation result. If the dragging fails, corresponding prompts can also be given through animation effects, such as the node flashing or vibrating.

[0092] Example 2:

[0093] An interactive device for a tree - shaped control that supports cross - level dragging in this example includes: at least one memory and at least one processor;

[0094] The memory is used to store machine - readable programs;

[0095] The processor is used to call the machine - readable program to execute an interactive method for a tree - shaped control that supports cross - level dragging.

[0096] The processor can be a central processing unit (CPU), or other general - purpose processors, digital signal processors (DSPs), application - specific integrated circuits (ASICs), field - programmable gate arrays (FPGAs) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The processor can be a microprocessor or any conventional processor, etc.

[0097] The memory can be used to store computer programs and / or modules. The processor realizes various functions of the electronic device by running or executing the computer programs and / or modules stored in the memory and calling the data stored in the memory. The memory mainly includes a program storage area and a data storage area. Among them, the program storage area can store the operating system, application programs required for at least one function, etc.; the data storage area can store data created according to the use of the terminal, etc. In addition, the memory can also include high - speed random - access memory, and can also include non - volatile memory, such as hard disks, memory, plug - in hard disks, smart media cards (SMCs), secure digital (SD) cards, flash memory cards, at least one magnetic disk storage period, flash memory devices, or other volatile solid - state storage devices.

[0098] The above specific embodiments are only specific cases of the present invention. The patent protection scope of the present invention includes but is not limited to the above specific embodiments. Any technical solution that conforms to the technical solutions described in the above specific embodiments of the present invention and any appropriate changes or substitutions made by any person of ordinary skill in the art shall fall within the patent protection scope of the present invention.

[0099] Although the embodiments of the present invention have been shown and described, for those of ordinary skill in the art, it can be understood that various changes, modifications, substitutions, and variations can be made to these embodiments without departing from the principles and spirit of the present invention. The scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A tree control interaction method supporting cross-level dragging, characterized in that: The steps are as follows: S1. The user triggers a drag operation; S2, record the dragged node information; S3, calculate the target position; S4, determine the legitimacy of the target location; S5. Update data structure; S6, display animation effect; S7, handle cross-tree drag; S8. Complete the operation.

2. A tree control interaction method supporting cross-level dragging according to claim 1, characterized in that: In step S1, when the user presses a node with the left mouse button in the tree control interface, the drag operation is triggered. With the help of Vue3's event monitoring capability, a mousedow event listener is added to the node component template.

3. A tree control interaction method supporting cross-level dragging according to claim 2, characterized in that: In step S2, once the drag operation is triggered, the key information of the dragged node is immediately recorded; First, get the custom data attributes of the node by accessing the dataset attribute of the node element stored in draggedNode, and then store the custom data attribute information in an object.

4. A tree control interaction method supporting cross-level dragging according to claim 3, characterized in that: In step S3, when the user is dragging a node, the position of the mouse pointer is calculated in real time to determine the target position where the dragged node is placed; First, add a mousemove event listener in the node component template, obtain the clientX and clientY coordinates of the mouse, use the document.querySelectorAll method to obtain all node elements in the tree control, traverse these nodes, and use the getBoundingClientRect method to obtain the position information of each node to determine whether the mouse position is within the node range; If it is within range, the node is marked as the target position, highlighted by adding the target-position class name, and the variable storing the target position is updated.

5. A tree control interaction method supporting cross-level dragging according to claim 4, characterized in that: In step S4, write an isPositionValid function, which receives the dragged node information and the target node as parameters. Inside the function, the identifiers of the dragged node and all its parent nodes are checked in a loop. If it is found that the identifier is the same as the target node identifier, it means that the target position is illegal and returns false. If no identical identifier is found after checking all parent nodes, true is returned.

6. A tree control interaction method supporting cross-level dragging according to claim 5, characterized in that: In step S5, if the target position is legal, the data structure of the tree control is updated, and an updateTreeData function is written. The updateTreeData function receives the dragged node information and the target node as parameters. First, the corresponding node in the tree data structure is found through the identifier of the target node, and then the filter method of the array is used to remove the corresponding node from the child node list of the original parent node of the dragged node; Finally, the dragged node is added to the child node list of the target node, and the parent node identifier of the dragged node is updated.

7. A tree control interaction method supporting cross-level dragging according to claim 6, characterized in that: In step S6, after the data structure is updated, the animation effect of the drag operation is displayed with the help of transition or CSS animation; In the component template, use dynamic class binding to create a responsive variable isDragged and initialize it to false. When the drag ends, set isDragged to true and use the setTimeout function to set it back to false after a certain period of time. In CSS, define transition effects and animation styles for the dragged class name.

8. A tree control interaction method supporting cross-level dragging according to claim 7, characterized in that: In step S7, if cross-tree dragging is involved, cross-tree data synchronization needs to be processed; First, write the handleCrossTreeDrag function, which receives the dragged node information and the target tree identifier as parameters. Inside the function, use the fetch function to send a cross-tree drag request to the backend server, set the request method to POST, and send the dragged node information and the target tree identifier as JSON data to the backend; Determine whether the cross-tree drag is successful based on the response result returned by the backend; If successful, update the front-end data; If it fails, a corresponding prompt message will be given.

9. A tree control interaction method supporting cross-level dragging according to claim 8, characterized in that: In step S8, the cross-level dragging or cross-tree dragging operation of the node is completed, and a finishDrag function is written to remove the temporary style added during the dragging process; Use the classList.remove method to remove the dragging class name from the dragged node, and traverse all nodes at the same time, remove the target-position class name, and restore the interface to its normal state.

10. A tree control interactive device supporting cross-level dragging, characterized in that: include: at least one memory and at least one processor; The at least one memory is used to store a machine-readable program; The at least one processor is configured to call the machine-readable program to execute the method according to any one of claims 1 to 9.

Images