juejin.cn/post/6844904083120193543 前言 公司经常为了活动推广营销，拉新留存，制作临时活动页面，且组件大体相似，为了提高运营的工作效率，减少开发成本，基于此开发一个活动可视化搭建项目...，让运营可以通过，点击和拖拽组件，选择或导入数据的的方式，快速生成活动页面上线，在此做一个小小的总结。...html文件，静态资源， obj通过模版传递挂载在window上，并生成唯一访问路径 发布时改变当前活动页面可访问状态 展示时，根据obj渲染指定的定制组件生成页面 重点 1.节点操作 不操作dom节点...，通过对数组对象的增删改查来更新视图 2.拖拽与判定 编辑时，涉及到拖拽，判断点与矩形相交，设置偏移量，来区分同级插入，或子级插入，以及提示信息 拖拽：也不是完全利用HTML5 拖放（Drag 和 drop...，渲染展示时，判断当前平台进而作出相应的展示 h5预览使用iframe，h5预览单独占一个路由，赋值给iframe的src属性 5.文字快速编辑 活动页面上会涉及很多文字，用户想修改，有几种方法 编辑按钮
mobile.png pc.png 特性： 任意拖拽嵌套：通过组件预览面板拖拽组件，到设计面板实现任意嵌套，设计面板中的组件也可随意拖拽嵌套 实时预览：设计面板中会实时展示组件的属性效果和样式效果，...并且与真实页面无异 DomTree展示：页面组件dom树的展示并实现dom实时追踪 可视化属性配置：结合React 特性和JS语法定制了可视化的组件属性配置，实现复杂数据结构的可视化配置 可视化样式配置...通过样式配置面板修改样式，实时在页面中显示样式效果 模板功能：可以选中局部或者整个页面做为可复用的模板，提高页面配置效率减少重复工作 组件约束：根据组件特性配置组件约束，减少组件间的错误嵌套和报错 预览与代码生成
最近做的项目要用到拖拽排序，我现在的项目是vue项目，所以我就屁颠屁颠的去百度有木有这样功能的插件，我就知道一定会有，那就是vuedraggable，这是一款很棒的拖拽插件，下面我来说一下怎么引入 首先在...evt.oldIndex) console.log('拖动后的索引 :' + evt.newIndex) console.log(this.colors); } }, mounted () { //为了防止火狐浏览器拖拽的时候以新标签打开
接下来按照完成功能点介绍下，主要包括： 编辑器 状态管理 自定义生成组件（目前完成文本、按钮、图片组件） 拖拽 组件属性编辑 放大、缩小 删除组件、调整图层层级 撤销、重做 动画 生成器 介绍 lowcode...lowcode平台其实就是通过拖拽或者点击预定义好的组件来生成页面，比较多的应用场景就是产品经理或者运维或者销售来自定义生成活动页，这样的操作简直不要太好，因为再也不需要一堆产品经理、交互、设计以及程序员开会才能完成一个活动页了...这个项目可以分成两部分，一部分是编辑器，一部分是生成器。编辑器用于生成页面，其实就是生成一个包含页面所有组件信息的对象值，如下： 然后可以把这个对象转成字符串存入数据库，对应一个id。...作为第三方来管理画布数据，起初小操作很好，但是因为涉及到组件数据里style、value等的修改，嵌套层级有点深，很多增删改查函数需要复用，但是使用reducer的话，很多修改逻辑要写在组件里，但是我不想组件过于臃肿，拆成工具函数又和...拖拽组件 画布上的组件需要是可拖拽的，通过拖拽控制位置，这个时候其实就是获取x与y轴上的移动距离，那么只需要用这次位置减去初始值位置就可以了。
运用H5新特性拖拽API实现一个拖拽更换图片的效果。 实现效果如下： 代码实现如下： H5新特性拖拽更换图片
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>DragDrop</title>...
Qt Designer中的操作方式十分灵活，其通过拖拽的方式放置控件可以随时查看控件效果。...Qt Designer生成的.ui文件（实质上是XML格式的文件）也可以通过pyuic5工具转换成.py文件。...然后点击OK，则添加了QtDesigner作为PyCharm的外置工具。...我们拖拽一个Label与Button进入主窗口（Main Window）。 ?...而通过Qt Designer，我们可以快速地制作UI，并生成Python的代码，从而实现快速地UI的开发。 使用转换的.py文件 然而，此时之间运行这个转换好的Python文件是无法显示任何窗口的。
很多时候，你并不需要很多专业知识，你就可以写出非常出色软件，而这一切都得益于很多低代码编程工具，这些拖拽工具可以非常方便地让你生成页面，甚至是获取数据。接下来我们就来盘点一下可视化代码生成工具。...Wix 一款非常出色的代码拖拽生成工具，它有着丰富的模板库，对于初学者，你可以从众多优秀的模板库中选择一款来开始自己的网页设计之旅。...SITE123 site123是一个非常简洁的网页生成器，使用它你可以拖拽生成一个网页。...码良 一个在线生成h5页面并提供页面管理和页面编辑的平台，用于快速制作H5页面。用户无需掌握复杂的编程技术，通过简单拖拽、少量配置即可制作精美的页面，可用于营销场景下的页面制作。...TaskBuilder 它是一款面向IT技术支持人员和专业程序员的低代码开发工具，可以通过组件化、可视化、模板化和向导化等多种手段，快速构建数据库增删改查类的Web和手机H5应用，大幅提升开发效率。
一、ymm-tech/gods-pen star: 1.7k watch: 270 fork: 557 码良是一个在线生成H5页面并提供页面管理和页面编辑的平台，用于快速制作H5页面。...【编辑器】 参考线 基础组件 可视化组件 媒体组件 商品组件 拖拽器 配置面板 表单设计器 (多)页面管理(复制,编辑, 删除, 新建) 组件动画 组件交互 数据源管理 快速预览 真机预览 撤销、重做...制作、建站工具，开源可视化搭建系统 特点： 1....移动端低代码平台lowcode可视化拖拽 可视化编辑器visual editor类似易企秀的H5制作、建站工具、可视化搭建工具 功能清单： 动态添加页面 拖拽式生成组件 service worker +...,免费html5制作工具,freeH5 APP,h5营销,h5页面制作,H5在线制作工具 运行环境 后端 nodejs+mysql 前端 seajs 以上便是本次分享的全部内容，希望对你有所帮助^_^
， 可以快速搭建可视化页面生产平台，让非技术人员可以通过拖拽和配置，自助生成H5页面、PC页面、TV页面，大大降低页面生产成本 。...项目链接：https://github.com/ymm-tech/gods-pen 最新star：4247 10 luban-h5 鲁班H5是基于Vue2.0开发的支持拖拽方式来快速生成页面的低代码平台...项目链接：https://github.com/imcuttle/mometa 最新star：3469 12 h5-factory h5-factory是专题页面可视化编辑工具，可以通过拖拽来设计页面，...github.com/xuhaiqing/h5-factory 最新star：6 13 steedos-platform steedos-platform是 Salesforce 低代码平台的开源替代方案，使用可视化工具进行模型设计...支持拖拽式、可视化、低代码数据可视化开发，你可以用它自由的拼接成各种炫酷的大屏，同时支持接入开发者自己开发的组件接入平台。
前言 前段时间笔者一直忙于数据可视化方面的工作，比如如何实现拖拽式生成可视化大屏，如何定制可视化图表交互和数据导入方案等，这块需求在B端企业中应用非常大，所以非常有探索价值。...本篇文章并非和数据可视化相关，而是通过抽象技术底层，将其应用于H5页面可视化搭建上，通过技术的手段实现拖拽式生成H5页面。...这块也有非常多的应用场景，比如我们需要开发一个移动端网站，一个H5营销页面，H5活动页面等，如果有这样的傻瓜式拖拽的工具生成H5页面，将会极大的提高我们的工作效率。...由上面的gif图我们可以分析出，可视化编辑器主要有以下几部分组成： 可拖拽的组件库 draggable components 盛放组件的画布 canvas 组件编辑器 FormEditor 头部工具栏...实现原理其实还是基于json, 我们通过可视化的手段将自己配置的 页面转化为json数据,最后在基于json渲染器来动态生成H5站点. ?
(H5编辑器)H5-Dooring是一款功能强大，开源免费的H5可视化页面拖拽布局配置解决方案，让你轻松实现拖拽式生成html5页面，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。...基于react的二维码生成插件 zarm 基于react的移动端ui库，轻松实现美观的H5应用 koa 基于nodejs的上一代开发框架，轻松实现基于nodejs的后端开发 @koa/router 基于...koa2的服务端路由中间件 ramda 优秀的函数式js工具库 # 已完成功能 组件库拖拽和显示 组件库动态编辑 H5页面预览功能 保存H5页面配置文件 保存为模版 移动端跨端适配 媒体组件 在线下载网站代码功能...升级图片组件为图文组件 添加模版库 添加可视化组件(基于g2)如折线图, 饼图, 面积图等 # to do list 丰富组件库组件 添加配置交互功能 组件细分和代码优化 单元测试 # 参考文档 H5...可视化编辑器(H5 Dooring)介绍 Form Editor(动态表单设计器) 基于f2实现移动端可视化编辑器(dooring升级版) 实现H5可视化编辑器的实时预览和真机扫码预览功能 基于
本文简介 点赞 + 关注 + 收藏 = 学会了 AntV G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。...本文主要讲解使用 AntV G6 实现 拖拽生成节点 的功能，如下图所示。 本文使用 Vue3 做基础框架，配合 G6 实现上图效果。 分析 在动手编码之前需要先对使用场景做一个分析。...2、画布有拖拽和缩放功能 如果画布支持拖拽和缩放，那鼠标所在的屏幕坐标和画布对应的坐标会更复杂。 3、元素面板如何实现拖拽功能？...元素面板是由原生 HTML 生成的，所以需要实现拖拽原生 HTML 元素的功能。 查找相关 API 坐标转换 上面的需求中，第1点和第2点其实都可以归为坐标转换。...height: 20px; border: 1px solid #ccc; } .circle { border-radius: 50%; } 代码仓库 ⭐AntV G6 拖拽生成节点
进行代码提交时，需要根据暂存区的内容，先生成tree对象，再生成commit对象 通过 git write-tree命令将暂存区内容写入一个树对象： $ git write-tree d8d965c56c04e851e3b47f524c6c52a24c396857...git commit 进行代码提交时，需要根据暂存区的内容，先生成tree对象，再生成commit对象，然后会将记录记录到logs文件夹下。...9、git 自带的图形工具有两个： https://www.zhihu.com/zvideo/1251479417017966592 git gui gitk 命令弹出【这个用的比较多】 10、git...鼠标移动速度越快，密钥生成就越快。...注意：puttyken获取鼠标行为来生成密钥。鼠标移动速度越快，密钥生成就越快。
AndroidStudio提供的插件可以支持ConstraintLayout拖拽的方式布局，也可以用手写代码布局，我们用两篇文章分别来记录下使用方法。...6.gif 第三种用于删除当前界面中的所有约束，点击工具栏中的删除约束图标即可，如下图所示。...想要使用Autoconnect，首先需要在工具栏中将这个功能启用，默认情况下Autoconnect是不启用的，如下图所示。...总之，可以把它当成一个辅助工具，但不能完全靠它去添加控件的约束。 以上是Autoconnect的用法，接下来我们看一下Inference的用法。...因而Inference比较适合用来实现复杂度比较高的界面，它可以一键自动生成所有的约束。
于是开始思考为什么不能通过拖拽直接生成和维护这些表单呢？于是leggo就此诞生，名字来源于乐高Lego，寓意像搭积木一样完成表单的设计。 leggo哲学 虽然利用了“拖拽”这一最直观简单的交互方式。...但leggo并非面向非前端人员，leggo是一个为专业前端开发者提升效率的工具 leggo从一开始就没有想要做成一个大而全的表单配置解决方案。 第一版甚至只是花了一个下午便告完成。...不但可拖拽的表单组件库能够被自由注册。所有通过leggo模板渲染的组件也可以轻松的被整体覆盖、组装或重写属性。你甚至可以暴露各种公共状态和函数给leggo消费。...这种个性化的组件并没有办法通过拖拽完成全部设计。 不要着急，我们先通过拖拽完成左侧经典表单组件部分的设计。...这个对象非常重要，它来自schemaModel，你通过leggo表单设计器拖拽和设置的几乎所有参数都存在这个对象中。实际上，我们正是通过中间件函数在改造由表单设计器生成的schemaModel。
低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，可以通过简单的拖拽、配置，即可完成业务应用的搭建。...移动端低代码平台 lowcode 可视化拖拽 可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具 目前还只是一个简单的模板，大家可以自己部署学习~ Github地址...让不会写代码的人也能轻松快速上手制作H5页面。类似易企秀、百度H5等H5制作、建站工具。...，包括多页面可视化构建、Json Schema 生成器（可视化搭建物料控制面板），实现组件流水线式标准接入平台。...最新版本使用 uni-app 重构物料、模板项目，支持生成 H5、小程序多端商城。
大家好，我是「前端实验室」爱分享的了不起~ 低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，可以通过简单的拖拽、配置，即可完成业务应用的搭建。...移动端低代码平台 lowcode 可视化拖拽 可视化编辑器 visual editor 类似易企秀的H5制作、建站工具、可视化搭建工具 目前还只是一个简单的模板，大家可以自己部署学习~ Github地址...让不会写代码的人也能轻松快速上手制作H5页面。类似易企秀、百度H5等H5制作、建站工具。...，包括多页面可视化构建、Json Schema 生成器（可视化搭建物料控制面板），实现组件流水线式标准接入平台。...最新版本使用 uni-app 重构物料、模板项目，支持生成 H5、小程序多端商城。
/ layout 合集 https://vuejsexamples.com/tag/layout/ 鲁班H5- 类似易企秀的H5制作、建站工具 https://github.com/ly525/luban-h5...码良快速制作H5页面 https://github.com/ymm-tech/gods-pen Panel-Magic 是基于 Angular8 实现的在线可视化编辑应用 https://github.com...web编辑器 https://github.com/page-pipepline/pipeline-editor 拖拽生成落地页，app，小程序实现测试开发运维部署客服一体化 https://github.com.../zhangyuhuihh/vue-page-produce 基于vue2 + koa2的 H5制作工具。...类似易企秀、百度H5等H5制作、建站工具 https://github.com/huangwei9527/quark-h5 VUE FLOW DESIGN 流程设计器 https://gitee.com
3.点击 使用Elementor编辑 ，选择左侧具体的模块进行拖拽编辑。当然有很多模板可以选，看中漂亮的模板，然后点击导入，再适当修改图片和文字
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
