Shadowgraph
TrendingBuzzResearch
Chrome extension
Sign in

woai3c/visual-drag-demo

一个低代码（可视化拖拽）教学项目

Vue

5,619

224 commits

updated May 27, 2026

woai3c.github.io/visual-drag-demo

See the code

README

一个低代码平台的前端部分，靠拖拉拽生成页面。

功能点

这是本项目具有的功能点，如果想了解详情请参考本项目的五篇文档，每个功能点都有不同程度的描述以及动图帮助你理解。

  1. 编辑器
  2. 自定义组件（文本、图片、矩形、圆形、直线、星形、三角形、按钮、表格、组合）
  3. 接口请求（通过接口请求组件数据）
  4. 组件联动
  5. 拖拽
  6. 删除组件、调整图层层级
  7. 放大缩小
  8. 撤消、重做
  9. 组件属性设置
  10. 吸附
  11. 预览、保存代码
  12. 绑定事件
  13. 绑定动画
  14. 拖拽旋转
  15. 复制粘贴剪切
  16. 多个组件的组合和拆分
  17. 锁定组件
  18. 网格线

在线 DEMO

文档

开发

安装

npm i

运行

npm run dev

打包

npm run build

License

MIT

Significant stargazers

nmsn

16 followers · starred Nov 2024

Edric.Li

10 followers · starred Sep 2024

美電球

24 followers · starred Jan 2026

Muyao

31 followers · starred Apr 2024

Similar repos

MrXujiang/h5-Dooring

H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面,…

10,003

H5-Dooring/dooringx

快速高效搭建可视化拖拽平台

2,386

brick-design/brick-design

低代码框架，支持流式布局与自由布局拖拽编排，可视化拖拽、随意嵌套组合、实时渲染、实时辅助线展示、自由布局支持辅助对齐、支持自动吸附、实时组件间距展示、实时拖拽排序、状态域管理，可视化属性配置、可视化…

5,147

codebdy/rxdrag

Design anything based on HTML, 可视化编辑， 带逻辑引擎的低代码前端。

3,749

ly525/luban-h5

[WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh:…

6,241

sparrow-js/sparrow

🎉场景化低代码（LowCode）搭建工作台，实时输出源代码

3,191

atlassian/pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack

12,783

ymm-tech/gods-pen

基于vue的高扩展在线网页制作平台，可自定义组件，可添加脚本，可数据统计。A mobile page builder/editor, similar with amolink.

4,447

woai3c/visual-drag-demo

一个低代码（可视化拖拽）教学项目

Vue

5,619

224 commits

updated May 27, 2026

woai3c.github.io/visual-drag-demo

See the code

README

一个低代码平台的前端部分，靠拖拉拽生成页面。

功能点

这是本项目具有的功能点，如果想了解详情请参考本项目的五篇文档，每个功能点都有不同程度的描述以及动图帮助你理解。

  1. 编辑器
  2. 自定义组件（文本、图片、矩形、圆形、直线、星形、三角形、按钮、表格、组合）
  3. 接口请求（通过接口请求组件数据）
  4. 组件联动
  5. 拖拽
  6. 删除组件、调整图层层级
  7. 放大缩小
  8. 撤消、重做
  9. 组件属性设置
  10. 吸附
  11. 预览、保存代码
  12. 绑定事件
  13. 绑定动画
  14. 拖拽旋转
  15. 复制粘贴剪切
  16. 多个组件的组合和拆分
  17. 锁定组件
  18. 网格线

在线 DEMO

文档

开发

安装

npm i

运行

npm run dev

打包

npm run build

License

MIT

Significant stargazers

nmsn

16 followers · starred Nov 2024

Edric.Li

10 followers · starred Sep 2024

美電球

24 followers · starred Jan 2026

Muyao

31 followers · starred Apr 2024

Similar repos

MrXujiang/h5-Dooring

H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面,…

10,003

H5-Dooring/dooringx

快速高效搭建可视化拖拽平台

2,386

brick-design/brick-design

低代码框架，支持流式布局与自由布局拖拽编排，可视化拖拽、随意嵌套组合、实时渲染、实时辅助线展示、自由布局支持辅助对齐、支持自动吸附、实时组件间距展示、实时拖拽排序、状态域管理，可视化属性配置、可视化…

5,147

codebdy/rxdrag

Design anything based on HTML, 可视化编辑， 带逻辑引擎的低代码前端。

3,749

ly525/luban-h5

[WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh:…

6,241

sparrow-js/sparrow

🎉场景化低代码（LowCode）搭建工作台，实时输出源代码

3,191

atlassian/pragmatic-drag-and-drop

Fast drag and drop for any experience on any tech stack

12,783

ymm-tech/gods-pen

基于vue的高扩展在线网页制作平台，可自定义组件，可添加脚本，可数据统计。A mobile page builder/editor, similar with amolink.

4,447