一种web前端页面的可视化编辑生成系统及装置制造方法及图纸

本发明专利技术公开了一种web前端页面的可视化编辑生成系统及装置，该系统包括前端页面布局界面和操作行为监听控制器。该装置所包含的处理器执行以下步骤：对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层，然后，当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理。本发明专利技术系统及装置对页面开发制作者的技术专业知识及经验要求低，操作适用性强，页面编辑制作方便快捷，灵活性强，有利于向大众推广并进行普及应用。本发明专利技术作为一种web前端页面的可视化编辑生成系统及装置可广泛应用于前端页面制作领域中。

【技术实现步骤摘要】
一种web前端页面的可视化编辑生成系统及装置
本专利技术涉及web技术和页面编辑生成技术，尤其涉及一种web前端页面的可视化编辑生成系统及装置。
技术介绍
技术词解释：html：超级文本标记语言，其是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。web前端界面：通过浏览器给用户展示的界面图形，其中包含了设计、特效、用户交互等内容。button：按钮。众所周知，整个互联网是由无数网页组合而成的，而网页的本质就是超文本标记语言HTML。可以说，HTML正是互联网的基石。随着时代的发展，尤其是HTML5的正式发布后，互联网技术的更新迭代变得更加迅速。而用户对互联网的需求也越来越多，越来越多没有互联网开发基础的用户也需要制作特定的前端页面。然而，传统的WEB前端页面开发模式需要掌握一定前端开发技能的工程师并且要花费大量的时间才能进行页面的开发和制作，同时其还存在效率低下以及规范不统一导致难以维护等问题。因此设计一种合理、可行、科学、且能够适用于零WEB前端开发基础人员的WEB前端页面编辑生成方法具有重要的意义。专利技术内容为了解决上述技术本文档来自技高网...

【技术保护点】
一种web前端页面的可视化编辑生成系统，其特征在于：该系统包括：前端页面布局界面，包含有控件区、画布编辑区和工具操作区；操作行为监听控制器，用于对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理；其中，所述临时层用于跟随鼠标移动轨迹进行移动；存储有被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。

【技术特征摘要】
1.一种web前端页面的可视化编辑生成系统，其特征在于：该系统包括：前端页面布局界面，包含有控件区、画布编辑区和工具操作区；操作行为监听控制器，用于对设置在控件区中的按钮元素进行拖拽操作行为的监听；当监听到按钮元素被拖拽操作时，新建与被拖拽的按钮元素相对应的临时层；当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理；其中，所述临时层用于跟随鼠标移动轨迹进行移动；存储有被拖拽的按钮元素所对应的多媒体控件的页面信息及数据信息；根据多媒体控件的页面信息及数据信息，渲染出对应的多媒体插件效果。2.根据权利要求1所述一种web前端页面的可视化编辑生成系统，其特征在于：所述当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理这一步骤，其包括以下步骤：当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则按照预设的规范，在画布编辑区生成与被拖拽的按钮元素相对应的多媒体控件的代码，并渲染在画布编辑区上，以及自动构建出对应的编辑工具；反之，则取消操作，并清除临时层。3.根据权利要求1所述一种web前端页面的可视化编辑生成系统，其特征在于：所述当监听到释放鼠标行为操作时，则根据当前鼠标位置，执行相对应的处理这一步骤，其包括以下步骤：当监听到释放鼠标行为操作时，判断当前鼠标位置是否处于合法的画布编辑区中，若是，则判断画布编辑区中是否存有布局控件，以及判断临时层所存储的多媒体控件代码是否对应布局控件，然后根据判断结果，执行相对应的处理；反之，则取消操作，并清除临时层。4.根据权利要求3所述一种web前端页面的可视化编辑生成系统，其特征在于：所述根据判断结果，执行相对应的处理这一步骤，其包括以下步骤：当画布编辑区中没有存有布局控件，且临时层所存储的多媒体控件代码也不是对应布局控件，此时，则取消操作，并清除临时层；当画布编辑区中没有存有布局控件，且临时层所存储的多媒体控件代码是对应布局控件，此时，则按照预设的规范，在...

【专利技术属性】
技术研发人员：蔡禹，林悦洁，伍紫莹，
申请(专利权)人：广东广业开元科技有限公司，
类型：发明
国别省市：广东,44