Draggable configuration page development method and system

Abstract

The invention provides a draggable configuration page development method and system. The method comprises the following steps: selecting a front-end framework required by draggable configuration page development; obtaining a demand of a draggable configuration page; acquiring a draggable component based on the acquired demand of the draggable configuration page; and based on the selected front-end framework, performing responsive layout and adaptation on the draggable component, and developing to obtain a draggable configuration page. According to the method, the draggable configuration page is obtained through development, flexible dragging and rapid configuration of page elements are achieved, the efficiency and flexibility of page development are improved, a new change is brought to the field of front-end development, and enterprises are assisted to construct more personalized and intelligent Web applications.

Description

Technical Field

[0001] The present application relates to the technical field of page development, and in particular to a method and system for developing a draggable configurable page. Background Art

[0002] In the fields of software development, user interface design, and web design, draggable configurable pages are an important technical means. This technology allows users to design and configure pages by dragging and dropping components, thereby improving the flexibility and customizability of the user interface. Draggable configurable page technology can be applied to various application scenarios, such as website construction, mobile application development, desktop application development, etc.

[0003] Solutions of existing technologies: Existing draggable configurable page technologies usually adopt the following solutions:

[0004] The drag and drop technology based on HTML5 and JavaScript utilizes standard APIs of HTML5 and JavaScript respectively to implement the drag and drop function, for example, using the Drag and Drop API of HTML5 and the event handling mechanism of JavaScript.

[0005] Based on the drag and drop technology of third-party libraries, some developers choose to use third-party libraries, such as jQueryUI, KendoUI, Bootstrap, etc., to provide drag and drop functions. These libraries provide rich drag and drop components and APIs, which can be easily integrated into the project.

[0006] Although the existing draggable configurable page technology can meet some basic requirements, there are still some problems and limitations:

[0007] Performance issues: Drag-and-drop technologies based on HTML5 and JavaScript may face performance issues, especially when dealing with large numbers of components and data;

[0008] Compatibility issues: Different browsers and devices may have different support for HTML5 and JavaScript standards, which may cause compatibility issues;

[0009] High complexity: Drag-and-drop technology based on third-party libraries and framework-based drag-and-drop technology usually require deeper programming skills and more development time, which may increase development costs and time;

[0010] Scalability issues: Existing technologies are often difficult to meet complex business needs, such as the need to support dynamic data binding, complex state management, etc.

[0011] Therefore, how to develop an efficient, compatible, easy-to-use and scalable draggable configurable page technology is an important topic in the current technology field. Summary of the invention

[0012] The present application provides a method and system for developing a draggable configurable page, which can solve the technical problems of poor performance, poor browser and device compatibility, and high development complexity in the existing development of draggable configurable pages when processing a large number of components and data.

[0013] In a first aspect, the present application provides a draggable configurable page development method, comprising the following steps:

[0014] Select the front-end framework required for draggable configurable page development;

[0015] Get the requirements for draggable configurable pages;

[0016] Based on the requirements of the obtained draggable configuration page, obtain the draggable component;

[0017] Based on the selected front-end framework, the draggable components are responsively laid out and adapted to develop a draggable configurable page.

[0018] In combination with the first aspect, in one implementation, the front-end framework required for the development of the draggable configurable page is vue.js.

[0019] In combination with the first aspect, in one implementation, the obtaining of the draggable component based on the requirement of the obtained draggable configurable page specifically includes the following steps:

[0020] Get the component pool;

[0021] According to the requirements of the obtained draggable configurable page, layout components and functional components are selected from the component pool and corresponding attributes are assigned to the components.

[0022] In combination with the first aspect, in one implementation, the responsive layout and adaptation of the draggable component based on the selected front-end framework to develop a draggable configurable page specifically includes the following steps:

[0023] Divide the page into multiple module areas according to business needs, and distinguish multiple module areas into draggable modular areas and non-draggable modular areas;

[0024] Based on the selected front-end framework, select the plug-in tool in the draggable modular area to drag and configure the draggable component.

[0025] Provide responsive layout and adaptive design for the page.

[0026] In combination with the first aspect, in one implementation, performing responsive layout and adaptive design on the page specifically includes the following steps:

[0027] Set the viewport of the draggable configurable page;

[0028] Prioritize development devices for draggable configurable pages;

[0029] Set the page layout of the draggable configurable page;

[0030] Adaptively adjust the grid layout of the page;

[0031] Set up fixed navigation bar, side navigation bar and bottom navigation bar on the page.

[0032] Adaptively adjust page layout according to screen resolution and component dragging;

[0033] For draggable components, set up cross-device adaptation for the page.

[0034] In combination with the first aspect, in one implementation, the priority setting of the development device of the draggable configurable page specifically includes the following steps:

[0035] Prioritize the development of drag-and-drop configurable pages for mobile devices;

[0036] Based on the draggable configurable page on the mobile terminal, add CSS to develop a draggable configurable page adapted to devices with larger screens.

[0037] In combination with the first aspect, in one implementation, the adaptively adjusting the grid layout of the page specifically includes the following steps:

[0038] Use percentages instead of fixed pixels to create grid layouts;

[0039] Leverage CSS media breakpoints and media queries to change layouts at predefined screen size breakpoints.

[0040] In combination with the first aspect, in one implementation, the step of performing cross-device adaptation setting on a page for a draggable component specifically includes the following steps:

[0041] Use CSS media queries to adjust web page layout and content based on the device's screen size, resolution, and orientation;

[0042] Create a grid system using CSS's Flexbox and Grid layouts.

[0043] In a second aspect, the present application provides a draggable configurable page development system, including:

[0044] The front-end framework selection module is used to select the front-end framework required for draggable configurable page development;

[0045] Page development requirement acquisition module, used to obtain the requirements of draggable configurable pages;

[0046] A draggable component acquisition module is connected to the page development requirement acquisition module for acquiring a draggable component based on the acquired draggable configurable page requirement;

[0047] The page development module is in communication with the front-end framework selection module and the draggable component acquisition module, and is used to responsively layout and adapt the draggable components based on the selected front-end framework to develop a draggable configurable page.

[0048] In conjunction with the second aspect, in one implementation, the page development module includes:

[0049] A module area division unit is used to divide a page into multiple module areas according to business needs, and to distinguish multiple module areas into draggable modular areas and non-draggable modular areas;

[0050] The component dragging implementation unit is in communication connection with the module area division unit and is used for selecting a plug-in tool in the draggable modular area to drag and configure the draggable component based on the selected front-end framework.

[0051] The responsive design unit is connected to the component dragging implementation unit for performing responsive layout and adaptive design on the page.

[0052] The beneficial effects brought by the technical solution provided by the embodiment of the present application include at least:

[0053] This application has developed a draggable configurable page, which realizes flexible dragging and quick configuration of page elements, greatly improving the efficiency and flexibility of page development, bringing new changes to the front-end development field, and helping enterprises build more personalized and intelligent Web applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] Figure 1 A flowchart of the draggable configurable page development method for this application;

[0055] Figure 2 Components, component styles, and page renderings selected for the draggable configurable page development method of this application;

[0056] Figure 3 Another flowchart of the draggable configurable page development method for this application. DETAILED DESCRIPTION

[0057] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0058] The terms "including" and "having" and any variations thereof in the specification and claims of this application and the above-mentioned drawings are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally includes steps or units that are not listed, or optionally includes other steps or units inherent to these processes, methods, products or devices. The terms "first", "second" and "third" are used to distinguish different objects, etc., and do not represent a sequence, nor do they limit "first", "second" and "third" to different types.

[0059] In the description of the embodiments of the present application, "exemplary", "for example" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or design described as "exemplary", "for example" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary", "for example" or "for example" is intended to present related concepts in a specific way.

[0060] In the description of the embodiments of the present application, unless otherwise specified, “ / ” means or, for example, A / B can mean A or B; the “and / or” in the text is merely a description of the association relationship of associated objects, indicating that three relationships may exist, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, “multiple” refers to two or more than two.

[0061] In some processes described in the embodiments of the present application, multiple operations or steps that appear in a specific order are included, but it should be understood that these operations or steps may not be executed in the order in which they appear in the embodiments of the present application or in parallel, and the sequence number of the operation is only used to distinguish the different operations, and the sequence number itself does not represent any execution order. In addition, these processes may include more or fewer operations, and these operations or steps may be executed in sequence or in parallel, and these operations or steps may be combined.

[0062] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below with reference to the accompanying drawings.

[0063] First, as Figure 1 As shown, the embodiment of the present application provides a draggable configurable page development method, comprising the following steps:

[0064] Step S1: Select the front-end framework required for draggable configurable page development;

[0065] Step S2: Obtaining the requirement of the draggable configurable page;

[0066] Step S3: based on the requirements of the obtained draggable configuration page, obtain the draggable component;

[0067] Step S4: Based on the selected front-end framework, the draggable components are responsively laid out and adapted to develop a draggable configurable page.

[0068] This application has developed a draggable configurable page, which realizes flexible dragging and quick configuration of page elements, greatly improving the efficiency and flexibility of page development, bringing new changes to the front-end development field, and helping enterprises build more personalized and intelligent Web applications.

[0069] The technology stack of this application includes but is not limited to node, vue, webpack, and Ant Design; among them, Node.js is a server-side JavaScript runtime environment based on the Google V8 engine, which is used to run the server-side logic of the front-end application. Node.js allows developers to use JavaScript to write server-side code to achieve the unification of front-end and back-end technologies; Vue.js is a progressive JavaScript framework that supports building user interfaces without directly operating DOM nodes. It is suitable for developing elegant and concise applications. It has the capabilities of componentization and responsive development, allowing developers to build complex web applications more efficiently; Webpack is used to convert, package and optimize source code so that it can run in a browser; Ant Design provides pre-made user interface components to accelerate the development process. Step S1 of this application: Select vue.js as the front-end framework for the development of draggable configurable pages. It is easy to use and a progressive framework that can be gradually adopted according to needs. It has the characteristics of responsive data binding, two-way data binding, etc., which is conducive to improving the processing efficiency of draggable configurable pages, especially when processing a large number of components and data, it can maintain good performance.

[0070] In one embodiment, step S2: obtaining the requirement of the draggable configurable page is specifically implemented as follows:

[0071] Step S21: Obtain target functional requirements for page configuration, including user preferences and business requirements for page design.

[0072] In one embodiment, if Figure 2 As shown, Figure 2 (a) is a diagram illustrating the draggable component area; Figure 2 (b) is a draggable configurable page display area map. Figure 2 (c) is a diagram illustrating the style of the draggable component. Step S3: based on the requirements of the obtained draggable configuration page, obtain the draggable component, which specifically includes the following steps:

[0073] Step S31: Obtain a component pool; according to the requirements of the obtained draggable configurable page, select layout components (or basic components) and functional components (or advanced components) from the component pool and assign corresponding attributes to the components, wherein the basic components include buttons, icons, layouts, TABs, lists, cards, and TAGs, etc., the advanced components include carousels, progress bars, status bars, sliders, and revolving lanterns, etc., and the draggable components include layout components and functional components;

[0074] Step S32: According to the requirements of the obtained draggable configurable page, layout components and functional components are selected from the component pool and corresponding attributes are assigned to the components. The basic attributes include box model, layout, border, margin, length and width, rounded corners, color, font, size background image and icon, etc. The advanced attributes include motion effects, gradients, transparency and transition effects.

[0075] This application provides a simple and easy-to-use component pool, which lowers the development threshold and allows developers to quickly apply integration and draggable configurable page functions. At the same time, this application can realize complex business needs through advanced components and has good scalability.

[0076] In one embodiment, step S4: based on the selected front-end framework, responsive layout and adaptation are performed on the draggable component to develop a draggable configurable page, which specifically includes the following steps:

[0077] Step S41: Divide the page into multiple module areas according to business needs, and distinguish the multiple module areas into draggable modular areas and non-draggable modular areas;

[0078] Step S42: Based on the selected front-end framework, select a suitable plug-in tool in the draggable modular area to drag and configure the draggable component. For example, in React.js, use react-draggable to provide an API for processing the drag operation; in Vue.js, use Vue.Draggable to provide Sortable.js for implementing the draggable property of the component;

[0079] Take Vue.Draggable as an example. In the Vue project, execute npm install vuedraggable --save through the command line to install the Vue.Draggable component pool.

[0080] Import and use in the component:

[0081] <template>

[0082] <draggable:list="items">

[0083] <div v-for＝"itemin items":key＝"item.id">

[0084] {{item.text}}

[0085]

[0086]

[0087] < / template>

[0088] <script>

[0089] import dra。

[0090] 步骤S43:对页面进行响应式布局与适配设计。

[0091] 本申请采用了模块化的设计和开发模式，使得各个模块可以独立开发、测试和维护，提高了系统的可靠性和可维护性。

[0092] 在一实施例中，考虑可拖动配置化页面在跨设备和跨浏览器的兼容性，所述步骤S43:对页面进行响应式布局与适配设计，具体包括以下步骤；

[0093] 步骤S431:对可拖动配置化页面的视口进行设置；

[0094] 步骤S432：对可拖动配置化页面的开发设备进行优先级设置；

[0095] 步骤S433：对可拖动配置化页面的页面布局进行设置；

[0096] 步骤S434:自适应调整页面的网格布局；

[0097] 步骤S435:在页面设置固定导航栏、侧边导航栏和底部导航栏。

[0098] 步骤S436：根据屏幕分辨率和组件拖动自适应调整页面排版；

[0099] 步骤S437：针对可拖动组件，对页面进行跨设备适配设置。

[0100] 本申请针对可拖动配置化页面提供响应式设计，从视口设置、移动端优先设计、极简主义设计到网格布局灵活化设计、导航与交互设计、内容排版响应式设计以及跨设备适配等多个方面，提升页面的响应性能，实现可拖动配置化页面跨浏览器和跨设备的兼容性，确保了在不同的浏览器和设备上都能稳定运行，避免了现有技术中可能出现的兼容性问题。

[0101] 在一实施例中，所述步骤S431:对可拖动配置化页面的视口进行设置，设置为简单的页面视口，为可拖动配置化页面的响应式设计提供高效响应的视口基础，具体实现为：在HTML中，使用<meta name＝"viewport"content＝"width＝device-width,initial-scale＝1">设置视口，将视口宽度设置为设备宽度，并确保初始缩放比例为1，从而使得CSS中的1像素等于1设备独立像素；同时开放用户页面缩放功能，以对页面实现更灵活地浏览页面以及针对性精准拖动组件。

[0102] 在一实施例中，步骤S432对可拖动配置化页面的开发设备进行优先级设置，具体实现为：

[0103] 优先开发移动端的拖动化配置化页面，在移动端的拖动化配置化页面的基础上，增加CSS的复杂度以适应更大的屏幕，由于移动端页面通常更简单，需要CSS较少，因此这种方法可以简化开发过程，简化代码，移动端优先进行可拖动配置化页面开发的方法有助于减少不必要的代码，使网站更加高效和易于维护；

[0104] 在一实施例中，步骤S433：对可拖动配置化页面的页面布局进行设置，主要实现为以下几个方面：

[0105] 减少页面元素，简化视觉效果，使用户能够更加专注于核心内容。

[0106] 采用清晰的布局结构，使页面信息层次分明，易于阅读和导航。

[0107] 使用统一的色调和简洁的色彩搭配，以及高质量的图像来增强视觉效果，同时保持页面的整洁和统一。

[0108] 在一实施例中，步骤S434:自适应调整页面的网格布局，具体实现为：

[0109] 使用百分比而不是固定像素来创建网格布局，使页面能够在不同屏幕尺寸下良好显示。

[0110] 利用CSS媒体进行断点与媒体查询，在预定义的屏幕尺寸断点处改变布局，以适应不同的设备。

[0111] 在一实施例中，步骤S435:在页面设置固定导航栏、侧边导航栏和底部导航栏，具体包括以下步骤：

[0112] 将导航简化为最基本的结构和功能，以减少视觉干扰和复杂性；

[0113] 采用固定导航栏、侧边栏或底部导航等布局方式，使导航在不同设备上都能保持一致且易于访问；

[0114] 通过简洁的动画和微交互来提升用户的参与度和满意度，并确保这些效果在不同设备上都能一致和流畅地显示。

[0115] 在一实施例中，所述步骤S436：根据屏幕分辨率和组件拖动自适应调整页面排版，具体包括以下步骤：

[0116] 使用响应式排版技术来自动调整文字大小、行间距和段落间距等参数，自动调整排版，以适应不同设备的屏幕分辨率和用户偏好。

[0117] 通过合理的段落划分、标题设置以及主要内容区域周围的留白空间，使页面显得更加整洁和专业。

[0118] 在一实施例中，步骤S437：针对可拖动组件，对页面进行跨设备适配设置，具体包括以下步骤：

[0119] 通过CSS媒体查询来根据设备的屏幕大小、分辨率和方向来调整网页布局和内容，实现跨设备的响应式设计；

[0120] 使用CSS的Flexbox和Grid布局协助创建灵活的、可调整的网格系统，从而适应不同设备的屏幕大小，实现弹性的网格系统的布局。

[0121] 在一实施例中，所述步骤S4：基于选择的前端框架，对可拖动组件进行响应式布局与适配，开发得到可拖动配置化页面之后，还包括以下步骤：

[0122] 预览页面,获取设计的可拖动配置化页面的页面展示效果；

[0123] 当页面展示效果符合预期效果时，保持并生成对应文件。

[0124] 在一较具体和完整的实施例中，如图3所示，本申请提供的可拖动配置化页面开发方法，包括以下步骤：

[0125] 构建组件池；

[0126] 从组件池中选取布局组件和功能组件；

[0127] 可以对选取的组件进行样式的自定义，并且可能在配置栏进行修改；

[0128] 在自定义样式后，可以继续通过拖拽操作选取功能组件。

[0129] 在完成组件的选择和样式设置后，预览页面；

[0130] 预览满意后，保存并生成对应文件，生成HTML页面。

[0131] 生成的HTML页面可以实现多端可视化。

[0132] 最后将页面自动化部署到服务器。

[0133] 第二方面，本申请提供了一种可拖动配置化页面开发系统，包括：

[0134] 前端框架选择模块，用于选择可拖动配置化页面开发需要的前端框架；

[0135] 页面开发需求获取模块，用于获取可拖动配置化页面的需求；

[0136] 可拖动组件获取模块，与所述页面开发需求获取模块通信连接，用于基于获取的可拖动配置化页面的需求，获取可拖动组件；

[0137] 页面开发模块，与所述前端框架选择模块和所述可拖动组件获取模块通信连接，用于基于选择的前端框架，对可拖动组件进行响应式布局与适配，开发得到可拖动配置化页面。

[0138] 结合第二方面，在一种实施方式中，所述页面开发模块包括：

[0139] 模块区域划分单元，用于按照业务需要划分页面为多个模块区域，区分多个模块区域为可拖动模块化区域和不可拖动模块化区域；

[0140] 组件拖动实现单元，与所述模块区域划分单元通信连接，用于基于选择的前端框架，在可拖动模块化区域内选择合适插件工具对可拖动组件进行拖动配置。

[0141] 响应式设计单元，与所述组件拖动实现单元通信连接，用于对页面进行响应式布局与适配设计。

[0142] 其中，上述可拖动配置化页面开发系统中各个模块的功能实现与上述可拖动配置化页面开发方法实施例中各步骤相对应，其功能和实现过程在此处不再一一赘述。

[0143] 第三方面，本申请实施例提供一种可拖动配置化页面开发设备，可拖动配置化页面开发设备可以是个人计算机(personal computer，PC)、笔记本电脑、服务器等具有数据处理功能的设备。

[0144] 通信接口包括输入 / 输出(input / output，I / O)接口、物理接口和逻辑接口等用于实现可拖动配置化页面开发设备内部的器件互连的接口，以及用于实现可拖动配置化页面开发设备与其他设备(例如其他计算设备或用户设备)互连的接口。物理接口可以是以太网接口、光纤接口、ATM接口等；用户设备可以是显示屏(Display)、键盘(Keyboard)等。

[0145] 存储器可以是各种类型的存储介质，例如随机存取存储器(randomaccessmemory，RAM)、只读存储器(read-only memory，ROM)、非易失性RAM(non-volatileRAM，NVRAM)、闪存、光存储器、硬盘、可编程ROM(programmable ROM，PROM)、可擦除PROM(erasable PROM，EPROM)、电可擦除PROM(electrically erasable PROM，EEPROM)等。

[0146] 处理器可以是通用处理器，通用处理器可以调用存储器中存储的可拖动配置化页面开发程序，并执行本申请实施例提供的可拖动配置化页面开发方法。例如，通用处理器可以是中央处理器(central processing unit，CPU)。其中，可拖动配置化页面开发程序被调用时所执行的方法可参照本申请可拖动配置化页面开发方法的各个实施例，此处不再赘述。

[0147] 第四方面，本申请实施例还提供一种可读存储介质。

[0148] 本申请可读存储介质上存储有可拖动配置化页面开发程序，其中所述可拖动配置化页面开发程序被处理器执行时，实现如上述的可拖动配置化页面开发方法的步骤。

[0149] 其中，可拖动配置化页面开发程序被执行时所实现的方法可参照本申请可拖动配置化页面开发方法的各个实施例，此处不再赘述。

[0150] 需要说明的是，上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

[0151] 通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM / RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备执行本申请各个实施例所述的方法。

[0152] 以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。< / script>

Claims

1. A draggable configurable page development method, characterized in that: The following steps are involved: Select the front-end framework required for draggable configurable page development; Get the requirements for draggable configurable pages; Based on the requirements of the obtained draggable configuration page, obtain the draggable component; Based on the selected front-end framework, the draggable components are responsively laid out and adapted to develop a draggable configurable page.

2. The draggable configurable page development method according to claim 1, characterized in that: The front-end framework required for the development of the draggable configurable page is vue.js.

3. The draggable configurable page development method according to claim 1, characterized in that: The step of obtaining the draggable component based on the requirements of the obtained draggable configuration page specifically includes the following steps: Get the component pool; According to the requirements of the obtained draggable configurable page, layout components and functional components are selected from the component pool and corresponding attributes are assigned to the components.

4. The draggable configurable page development method according to claim 1, characterized in that: Based on the selected front-end framework, the draggable component is responsively laid out and adapted to develop a draggable configurable page, which specifically includes the following steps: Divide the page into multiple module areas according to business needs, and distinguish multiple module areas into draggable modular areas and non-draggable modular areas; Based on the selected front-end framework, select the plug-in tool in the draggable modular area to drag and configure the draggable component; Provide responsive layout and adaptive design for the page.

5. The draggable configurable page development method according to claim 4, characterized in that: The responsive layout and adaptive design of the page specifically includes the following steps: Set the viewport of the draggable configurable page; Prioritize development devices for draggable configurable pages; Set the page layout of the draggable configurable page; Adaptively adjust the grid layout of the page; Set up fixed navigation bar, side navigation bar and bottom navigation bar on the page; Adaptively adjust page layout according to screen resolution and component dragging; For draggable components, set up cross-device adaptation for the page.

6. The draggable configurable page development method according to claim 5, characterized in that: The priority setting of the development device of the draggable configurable page specifically includes the following steps: Prioritize the development of drag-and-drop configurable pages for mobile devices; Based on the draggable configurable page on the mobile terminal, add CSS to develop a draggable configurable page adapted to devices with larger screens.

7. The draggable configurable page development method according to claim 5, characterized in that: The adaptive adjustment of the grid layout of the page specifically includes the following steps: Use percentages instead of fixed pixels to create grid layouts; Leverage CSS media breakpoints and media queries to change layouts at predefined screen size breakpoints.

8. The draggable configurable page development method according to claim 5, characterized in that: The cross-device adaptation setting of the page for the draggable component specifically includes the following steps: Use CSS media queries to adjust web page layout and content based on the device's screen size, resolution, and orientation; Create a grid system using CSS's Flexbox and Grid layouts.

9. A draggable configurable page development system, characterized in that: include: The front-end framework selection module is used to select the front-end framework required for draggable configurable page development; Page development requirement acquisition module, used to obtain the requirements of draggable configurable pages; A draggable component acquisition module is connected to the page development requirement acquisition module for acquiring a draggable component based on the acquired draggable configurable page requirement; The page development module is in communication with the front-end framework selection module and the draggable component acquisition module, and is used to responsively layout and adapt the draggable components based on the selected front-end framework to develop a draggable configurable page.

10. The draggable configurable page development system according to claim 9, characterized in that: The page development module includes: A module area division unit is used to divide a page into multiple module areas according to business needs, and to distinguish multiple module areas into draggable modular areas and non-draggable modular areas; A component dragging implementation unit, which is in communication connection with the module area division unit, is used to select a plug-in tool in the draggable modular area to drag and configure the draggable component based on the selected front-end framework; The responsive design unit is connected to the component dragging implementation unit for performing responsive layout and adaptive design on the page.

Images