html可视化拖拽框架,前端可视化拖拽方案

技术栈：react+dva+less+umi+antd+node+ sortable

umi：组件库设计考虑的一个重要的问题就是体积和渲染问题, 一旦组件库变的越来越多, 那意味着页面加载会非常慢,所以我们需要实现异步加载组件和代码分割的能力, umi提供了这样的功能,我们可以基于它提供的api去实现自己的额按需组件.

数据可视化： F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境(Node, 小程序，Weex)，完备的图形语法理论，满足你的各种可视化需求，专业的移动设计指引为你带来最佳的移动端图表体验。

编辑器实现

编辑器的实现思路是：编辑器生成页面JSON数据，服务端负责存取JSON数据，渲染时从服务端取数据JSON交给前端模板处理。

问题：我们采用了网格布局的方式来实现拖拽生成H5页面或者Web app, 其好处就是灵活简单, 用户基本没有任何使用成本, 在前端层也能做一定的横向扩展, 但是存在几个缺陷:

实现嵌套组件比较复杂

没有层的概念

解决方案：

将智能布局改为自由布局, 即可以采用类似 react-resizable 的这种方案

基于自然流来实现, 也就是抹去定位的概念, 完全基于元素在文档的顺序, 层级和定位的选择权交给用户

给予自然流布局实现拖拽生成页面

自然流布局的好处就是我们不用通过定位的方式来限定元素的位置等信息, 而是以html文档流的方式来布局元素, 并且用户可以灵活的设置元素的层级(layer)和偏移(transform)

1. 简单布局

2. 实现思路核心

画布区拖拽布局实现-拖拽排序机制(通过排序的方式改变组件的位置从而实现自然流布局的页面搭建.)

拖拽排序的库可以使用 sortable