System and method for generating dynamic form page through visual dragging

Abstract

The invention provides a system for generating a dynamic form page through visual dragging, and the system comprises a design interface which comprises a component region, a design region and a parameter configuration region: the component region comprises a basic component and a sharing component, and the basic component comprises a layout component, a form component, an interaction component anda display component, wherein the layout component can realize one-row multi-column and multi-layer nested layout, and a plurality of div layers are arranged in one row of a page to display an area; when the multi-layer assembly is nested, the outer-layer assembly is dragged to other areas, and the inner assembly is included together with the outer-layer assembly. A status bar is arranged at the bottom of the design area, each component dragged into the design area is provided with a unique ID attribute, the nesting relation of the components is obtained, the nesting relation is displayed on the status bar, and the component with the ID is directly positioned by clicking a certain component name of the status bar. According to the method, complete free layout is achieved, the method can adapt to any webpage design, and the display effect can be achieved through reasonable layout planning no matter how complex the pages are.

Description

technical field [0001] The invention belongs to the technical field of form page design, and in particular relates to a system and method for generating a dynamic form page by visual dragging. Background technique [0002] Drag and drop is a common and convenient feature, that is, grab an object and drag it to a designated area. In HTML5, DnD (Drag-and-Drop) provides free use as a native API, and any element can be dragged and dropped. Support The supported browsers include IE9 and above, Chrome, Firefox, Opera12 and above, and Safari5 and above. [0003] Drag-and-drop operation is recognized as an excellent experience in the industry in terms of free page layout and WYSIWYG intuitive effect display. It is generally common in the online development of publicity portals, and form pages are highly complex due to the diversity of forms and page interaction. , is not yet widely used. [0004] Moreover, the common page designers on the market occupy a single form in one row, an...

AI Technical Summary

Problems solved by technology

[0003] Drag-and-drop operation is recognized as an excellent experience in the industry in terms of free page layout and WYSIWYG intuitive effect display. It is generally common in the online development of publicity portals, and form pages are highly complex due to the diversity of forms and page interaction. , not yet widely used

[0004] And the common page designer on the market occupies a single line, unable to control the multi-column layout design in the line, or simply layout through the table, resulting in limited flexibility

Images