visual-drag-demo:可视化拖拽组件库DEMO_可视化拖拽组件库资源-CSDN文库

共72个文件

js：29个

vue：21个

css：4个

Vue

需积分: 40 124 浏览量 2021-03-08 10:54:28 上传评论收藏 265KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

visual-drag-demo-main.zip （72个子文件）

visual-drag-demo-main

vue.config.js 105B

package.json 835B

.github

workflows

ci.yml 664B

LICENSE 1KB

package-lock.json 476KB

src

App.vue 366B

assets

title.jpg 71KB

iconfont

iconfont.eot 3KB

iconfont.json 1KB

iconfont.ttf 3KB

iconfont.svg 6KB

iconfont.js 7KB

demo_index.html 11KB

iconfont.woff 2KB

iconfont.woff2 2KB

demo.css 8KB

iconfont.css 3KB

views

Home.vue 5KB

main.js 487B

components

Editor

Preview.vue 2KB

MarkLine.vue 10KB

ContextMenu.vue 3KB

Shape.vue 13KB

Grid.vue 1KB

index.vue 10KB

Area.vue 511B

ComponentWrapper.vue 953B

AttrList.vue 3KB

ComponentList.vue 1KB

Modal.vue 837B

AnimationList.vue 3KB

EventList.vue 2KB

Toolbar.vue 7KB

custom-component

RectShape.vue 354B

index.js 216B

component-list.js 2KB

VButton.vue 824B

Group.vue 2KB

Picture.vue 323B

VText.vue 3KB

styles

reset.css 450B

animate.css 76KB

utils

events.js 567B

utils.js 580B

translate.js 3KB

generateID.js 151B

calculateComponentPositonAndSize.js 12KB

toast.js 188B

eventBus.js 77B

animationClassData.js 5KB

shortcutKey.js 3KB

decomposeComponent.js 993B

runAnimation.js 705B

style.js 2KB

router

index.js 238B

store

animation.js 273B

index.js 3KB

compose.js 3KB

event.js 260B

copy.js 2KB

lock.js 212B

layer.js 1KB

contextmenu.js 389B

snapshot.js 1KB

.eslintrc.js 2KB

.gitignore 231B

.browserslistrc 30B

public

index.html 660B

favicon.ico 4KB

README.md 1KB

.editorconfig 160B

babel.config.js 76B

一个低代码平台的前端部分，靠拖拉拽生成页面。 ## 功能点这是本项目具有的功能点，如果想了解详情请参考本项目的三篇文档，每个功能点都有不同程度的描述以及动图帮助你理解。 1. 编辑器 2. 自定义组件 3. 拖拽 4. 删除组件、调整图层层级 5. 放大缩小 6. 撤消、重做 7. 组件属性设置 8. 吸附 9. 预览、保存代码 10. 绑定事件 11. 绑定动画 12. 导入 PSD 13. 手机模式 14. 拖拽旋转 15. 复制粘贴剪切 16. 数据交互 17. 发布 18. 多个组件的组合和拆分 19. 文本组件 20. 矩形组件 21. 锁定组件 22. 快捷键 23. 网格线 24. 编辑器快照的另一种实现方式 ## 在线 DEMO * [预览入口一](https://woai3c.gitee.io/visual-drag-demo) * [预览入口二](https://woai3c.github.io/visual-drag-demo) ## 文档 * [可视化拖拽组件库一些技术要点原理分析](https://github.com/woai3c/Front-end-articles/issues/19) * [可视化拖拽组件库一些技术要点原理分析（二）](https://github.com/woai3c/Front-end-articles/issues/20) * [可视化拖拽组件库一些技术要点原理分析（三）](https://github.com/woai3c/Front-end-articles/issues/21)

评论收藏

内容反馈