https://github.com/newpanjing/graphic-design
js和vue实现 图形画板，可以实现div 自动拖动 和拉伸改变大小。还实现了选区功能，可以和windows的桌面图标一样，拉选区选中多个div元素，实现批量拖动、删除的功能。
https://github.com/newpanjing/graphic-design
design js vue web web-design
Last synced: 11 months ago
JSON representation
js和vue实现 图形画板，可以实现div 自动拖动 和拉伸改变大小。还实现了选区功能，可以和windows的桌面图标一样，拉选区选中多个div元素，实现批量拖动、删除的功能。
- Host: GitHub
- URL: https://github.com/newpanjing/graphic-design
- Owner: newpanjing
- Created: 2019-01-17T07:07:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-21T07:31:40.000Z (over 7 years ago)
- Last Synced: 2025-04-03T17:05:07.480Z (over 1 year ago)
- Topics: design, js, vue, web, web-design
- Language: JavaScript
- Homepage: https://newpanjing.github.io/graphic-design/
- Size: 2.86 MB
- Stars: 70
- Watchers: 5
- Forks: 33
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# js+vue 自由图形画板
原生js+vue实现 图形画板，和windows图标一样，可以自由的拖动、拖拉改变大小。
以及和windows桌面一样 有选区，可以选中若干个元素一起拖动。
在线预览地址：
[https://newpanjing.github.io/graphic-design/](https://newpanjing.github.io/graphic-design/)
## 源码启动预览
+ 启动:
```shell
npm run start
```
+ 也可以直接运行app.js
````shell
node app.js
````
## 预览
## js 插件
+ drag.js
> 实现了div的自由拖动
+ resize.js
> 实现了div 自由改变大小
+ select.area.js
> 实现了 div 上选区
## 文档
+ [drag.js](/drag.md)
+ [resize.js](/resize.md)
+ [select.area.js](/selectArea.md)