Dragging type form construction method and device

Abstract

The invention relates to the technical field of web front ends, and particularly provides a drag-and-drop form construction method and device.The drag-and-drop form construction method comprises the following steps that S1, a detailed field attribute component is designed for each label field template component library; s2, adding a form attribute component in the form design window; s3, dragging the required label field from the toolbar to a form design window, automatically generating a corresponding form element, and creating a visual attribute editing bar; s4, dragging the label fields from the toolbar to a form design window and automatically generating corresponding form elements; s5, transmitting the form configuration in the form design window to a preview modal box in a data binding manner by using a modal box component of Vue; s6, performing serialization processing on all configured and designed form elements made by the user in the form design window; and S7, obtaining the generated form data, and receiving the form data according to the returned data. Compared with the prior art, the method has the advantages that the reusability of the codes can be obviously enhanced, the code redundancy is effectively reduced, and the development process is accelerated.

Description

Technical Field

[0001] The present invention relates to the technical field of web front-end, and specifically provides a drag-and-drop form construction method and device. Background Art

[0002] Vue is one of the most mainstream frameworks in the field of front-end development. It plays an important role in enterprise-level development, especially in building single-page applications for backend management systems. Its popularity and application are particularly significant. Its powerful componentization, data-driven and responsive features enable developers to efficiently and flexibly build enterprise-level applications with rich functions and excellent interactive experience.

[0003] The existing methods of dynamically generating forms are based on native javascript through mouse events and creating elements, or implemented by using html5, or using vue, etc. These implementation methods each have some problems such as a lot of redundant code, poor reusability, poor compatibility, high coupling, and low development efficiency. How to solve the above problems is an urgent problem for those skilled in the art to solve. Summary of the invention

[0004] The present invention aims at solving the above-mentioned deficiencies of the prior art and provides a highly practical drag-and-drop form construction method.

[0005] A further technical task of the present invention is to provide a drag-and-drop form building device that is rationally designed, safe and applicable.

[0006] The technical solution adopted by the present invention to solve its technical problem is:

[0007] A drag-and-drop form construction method includes the following steps:

[0008] S1. Build a diverse label field template component library and design detailed field attribute components for each label field template component library to support data input requirements;

[0009] S2. Develop a form design form component as the main workspace for users to create and edit forms. In the form design form, add a form attribute component;

[0010] S3. Integrate various label field template components into the form designer, and use a draggable toolbar to allow users to drag and drop the required label fields from the toolbar to the form design form, automatically generate corresponding form elements, and further integrate the label field attribute component with the form attribute component to create an intuitive attribute editing bar;

[0011] S4, implement the mechanism of dragging and dropping to generate form elements, and complete the process of dragging the label field from the toolbar to the form design form and automatically generating the corresponding form elements by monitoring the mouse press, move and release events;

[0012] S5. Develop the form preview function, use Vue's modal box component, pass the form configuration in the form design form to the preview modal box through data binding, so that users can preview the form effect without leaving the current page;

[0013] S6. Serialize all the configurations and form elements designed by the user in the form design form, convert them into a storable format, and save them in the database;

[0014] S7. Provide a form usage interface to obtain the generated form data. The recipient dynamically renders the corresponding form on the target page based on the returned data to achieve form reuse and integration.

[0015] Furthermore, in step S1, for each label field, field attributes are designed, including a title for display, an adjustable element width, and a custom style class name to achieve visual differentiation.

[0016] Furthermore, in step S2, the form design window supports dragging operations, and the dragged elements are displayed in a vertical arrangement by default, and are automatically expanded horizontally to fully utilize the form space;

[0017] Refine the overall form property settings, including label alignment to optimize layout, uniform width of form fields to maintain visual consistency, and size adjustment options for form pop-up windows during preview.

[0018] Furthermore, in step S3, the various label fields are orderly and neatly arranged in the toolbar through ordered list and positioning technology;

[0019] Use the tag switching mechanism to organize and manage form element properties and overall form properties.

[0020] Furthermore, in step S4, the specific process is as follows:

[0021] S4-1. When the user clicks a field in the toolbar, the field identification information, current position, and coordinates of the mouse click are captured as a reference for subsequent operations;

[0022] S4-2. Subsequently, if the user starts to drag the field, a temporary visual element that follows the mouse movement is dynamically created as a visual feedback during the dragging process;

[0023] S4-3. Once the user releases the mouse button, first, check whether the current position of the mouse is within the valid area of ​​the form design window. If so, destroy the temporary visual element, and create a corresponding form element on the form design window according to the mouse release position, and set its exact position at the same time;

[0024] If the mouse position is not within the form design window, only the temporary visual elements are destroyed and no form elements are created.

[0025] Furthermore, in step S6, the serialization process is to convert the form configuration into a standardized string format. When the form needs to be used again, the original form structure and configuration are restored by parsing the strings of these specific tags.

[0026] Furthermore, in step S7, an asynchronous request interface is provided to obtain the generated form data. The obtained form data exists in the form of a template string, which is read and loaded into the target web page to achieve dynamic rendering and integration of the form.

[0027] A drag-and-drop form construction device comprises: at least one memory and at least one processor;

[0028] The at least one memory is used to store a machine-readable program;

[0029] The at least one processor is used to call the machine-readable program to execute a drag-and-drop form construction method.

[0030] Compared with the prior art, the drag-and-drop form construction method and device of the present invention has the following outstanding beneficial effects:

[0031] The present invention is developed through the Vue framework. By adopting the MVVM (Model-View-ViewModel) architecture mode, it not only promotes the modular organization of the code, but also significantly enhances the reusability of the code, effectively reduces code redundancy, and thus accelerates the development process. In addition, users can intuitively build and edit a variety of forms through drag and drop operations. This intuitive and flexible design method greatly improves the interactivity and friendliness of the user interface, and brings users a smoother and more satisfactory operating experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0033] AttachedFigure 1 It is a flowchart of the overall drag-and-drop form building method;

[0034] Attached Figure 2 It is a schematic diagram of the specific logical process in the drag-and-drop form construction method. DETAILED DESCRIPTION

[0035] In order to enable those skilled in the art to better understand the solution of the present invention, the present invention is further described in detail below in conjunction with specific implementation methods. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0036] A best embodiment is given below:

[0037] like Figure 1 , 2 As shown, a drag-and-drop form construction method in this embodiment has the following steps:

[0038] S1. Build a diverse label field template component library to enrich the options of form design, and design detailed field attribute components for each label field template component library to support data input requirements;

[0039] The various types of label fields we defined cover the basic needs of text input, such as text boxes and input boxes for entering text information, buttons for triggering operations, date pickers for convenient date selection, drop-down boxes for selecting option lists, and file upload and download functions to meet file interaction needs.

[0040] For each label field, we have designed a variety of field attributes, including display titles, adjustable element widths, custom style class names for visual differentiation, and rigorous validation rules to ensure data validity.

[0041] S2. Develop a form design component as the main workspace for users to create and edit forms.

[0042] The form design window supports drag and drop operations, so that form elements (including titles and element bodies) can be added flexibly. The dragged elements are displayed in vertical arrangement by default, and automatically expand horizontally to make full use of the form space.

[0043] In the form design window, add the form property component so that users can set the global properties of the entire form.

[0044] The overall property settings of the form have been further refined, including label alignment to optimize layout, uniform width of form fields to maintain visual consistency, and size adjustment options for form pop-up windows during preview, such as width, top distance, and padding, to meet the needs of different preview scenarios.

[0045] S3. Integrate various label field template components into the form designer, and use a draggable toolbar to allow users to drag and drop the required label fields from the toolbar to the form design form, automatically generate corresponding form elements, and use ordered lists and positioning technology to arrange multiple label fields in an orderly and neat manner in the toolbar for users to drag and use.

[0046] Further integrate the label field attribute component with the form attribute component to create an intuitive attribute editing bar. In this way, users can not only set specific element attributes for each label field in the form, but also adjust the attribute settings of the entire form to meet diverse design needs.

[0047] The integrated method utilizes the tag switching mechanism to effectively organize and manage the form element attributes and the overall form attributes, thus improving the convenience and efficiency of attribute editing.

[0048] S4. Implement the mechanism of dragging and dropping to generate form elements. By monitoring the mouse press, move and release events, complete the process of dragging the label field from the toolbar to the form design form and automatically generate the corresponding form elements. The specific process includes:

[0049] (1) When the user clicks a field on the toolbar, the field's identification information, current position, and coordinates of the mouse click are captured as a basis for subsequent operations.

[0050] (2) Subsequently, if the user starts to drag the field, a temporary visual element is dynamically created that follows the mouse movement as visual feedback during the dragging process.

[0051] (3) Once the user releases the mouse button, the system first checks whether the current mouse position is within the valid area of ​​the form design window. If so, the temporary visual element is destroyed, and the corresponding form element is created on the form design window according to the mouse release position, and its exact position is set. If the mouse position is not within the form design window, only the temporary visual element is destroyed, and no form element is created.

[0052] The process of dragging and generating form elements through mouse events (such as pressing, moving, and releasing) is described in detail, including the precise positioning of the mouse and elements and the method of dynamically creating elements, ensuring the smoothness and accuracy of the drag operation.

[0053] In order to simplify the code structure and improve reusability, the preview function in step 8 uses Vue's pop-up component instead of the traditional JavaScript creation method, making the implementation of the preview function more concise and efficient.

[0054] S5. Develop the form preview function, use Vue's modal box component, and pass the form configuration in the form design form to the preview modal box through data binding, so that users can preview the form effect without leaving the current page.

[0055] S6. Serialize all the configurations and designed form elements made by the user in the form design form, convert them into a storable format, and save them in the database for subsequent use or management.

[0056] Serialization is the process of converting the form configuration into a standardized string format for easy storage and transmission. When the form needs to be used again, the original form structure and configuration can be quickly restored by parsing these specially marked strings.

[0057] S7. Provide a form usage interface to obtain the generated form data. The recipient dynamically renders the corresponding form on the target page based on the returned data to achieve form reuse and integration.

[0058] We provide an asynchronous request interface to obtain the generated form data. The obtained form data exists in the form of a template string, which can be easily read and loaded into the target web page to achieve dynamic rendering and integration of the form.

[0059] Based on the above method, a drag-and-drop form construction device in this embodiment includes: at least one memory and at least one processor;

[0060] The at least one memory is used to store a machine-readable program;

[0061] The at least one processor is used to call the machine-readable program to execute a drag-and-drop form construction method.

[0062] The above-mentioned specific implementations are only specific cases of the present invention. The patent protection scope of the present invention includes but is not limited to the above-mentioned specific implementations. Any technical solutions that conform to the above-mentioned specific implementations of the present invention and any appropriate changes or substitutions made by ordinary technicians in the relevant technical field shall fall within the patent protection scope of the present invention.

[0063] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A drag-and-drop form construction method, characterized in that: The steps are as follows: S1. Build a diverse label field template component library and design detailed field attribute components for each label field template component library to support data input requirements; S2. Develop a form design form component as the main workspace for users to create and edit forms. In the form design form, add a form attribute component; S3. Integrate various label field template components into the form designer, and use a draggable toolbar to allow users to drag and drop the required label fields from the toolbar to the form design form, automatically generate corresponding form elements, and further integrate the label field attribute component with the form attribute component to create an intuitive attribute editing bar; S4, implement the mechanism of dragging and dropping to generate form elements, and complete the process of dragging the label field from the toolbar to the form design form and automatically generating the corresponding form elements by monitoring the mouse press, move and release events; S5. Develop the form preview function, use Vue's modal box component, pass the form configuration in the form design form to the preview modal box through data binding, so that users can preview the form effect without leaving the current page; S6. Serialize all the configurations and form elements designed by the user in the form design form, convert them into a storable format, and save them in the database; S7. Provide a form usage interface to obtain the generated form data. The recipient dynamically renders the corresponding form on the target page based on the returned data to achieve form reuse and integration.

2. A method for constructing a drag-and-drop form according to claim 1, characterized in that: In step S1, for each label field, field attributes are designed, including a title for display, an adjustable element width, and a custom style class name to achieve visual differentiation.

3. A drag-and-drop form construction method according to claim 2, characterized in that: In step S2, the form design window supports dragging operations, and the dragged elements are displayed in a vertical arrangement by default, and are automatically expanded horizontally to fully utilize the form space; Refine the overall form property settings, including label alignment to optimize layout, uniform width of form fields to maintain visual consistency, and size adjustment options for form pop-up windows during preview.

4. A method for constructing a drag-and-drop form according to claim 3, characterized in that: In step S3, the various label fields are orderly and neatly arranged in the toolbar through ordered list and positioning technology; Use the tag switching mechanism to organize and manage form element properties and overall form properties.

5. A method for constructing a drag-and-drop form according to claim 4, characterized in that: In step S4, the specific process is as follows: S4-1. When the user clicks a field in the toolbar, the field identification information, current position, and coordinates of the mouse click are captured as a reference for subsequent operations; S4-2. Subsequently, if the user starts to drag the field, a temporary visual element that follows the mouse movement is dynamically created as a visual feedback during the dragging process; S4-3. Once the user releases the mouse button, first, check whether the current position of the mouse is within the valid area of ​​the form design window. If so, destroy the temporary visual element, and create a corresponding form element on the form design window according to the mouse release position, and set its exact position at the same time; If the mouse position is not within the form design window, only the temporary visual elements are destroyed and no form elements are created.

6. A method for constructing a drag-and-drop form according to claim 5, characterized in that: In step S6, the serialization process is to convert the form configuration into a standardized string format. When the form needs to be used again, the original form structure and configuration are restored by parsing the strings of these specific tags.

7. A method for constructing a drag-and-drop form according to claim 6, characterized in that: In step S7, an asynchronous request interface is provided to obtain the generated form data. The obtained form data exists in the form of a template string, which is read and loaded into the target web page to achieve dynamic rendering and integration of the form.

8. A drag-and-drop form construction device, 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 7.

Images