LowCode是一个高效、高性能的拖放式低代码开发平台。也是笔者近期研究的方向。我写过很多关于可视化平台实现的文章。下面我将带大家探索一个新的方向——基于自然流Layout的可视化搭建平台。在我们之前实现的h5-dooring构建平台中，我们采用网格布局的方式实现拖拽生成H5页面或者Webapp。优点是灵活简单，用户基本没有使用成本。前端层也可以做一定的水平扩展，但是有几个缺陷：嵌套组件实现比较复杂，没有层的概念。层和嵌套的问题虽然可以通过改造来实现，但最近也在尝试实现这个方向（虽然不同于设计的初衷是反驳，dooring的初衷是抹去层的概念和嵌套，让建筑变得扁平化和智能化，所以没有自由布局的方案）但是如果一定要实现嵌套和分层的功能，有没有别的办法？更简单的解决方案怎么样？笔者目前想到的方案有两种：将智能布局改为自由布局，即可以基于自然流实现类似react-resizable的方案，即抹去定位的概念，完全基于顺序文档中的元素、层次结构和定位的选择留给用户。因为作者在dooring前期已经实现了第一个版本，最后放弃了，采用了网格布局，所以下面讨论一下第二种解决方案的实现。基于自然流布局拖拽生成页面自然流布局的好处是我们不需要通过定位来限制元素等信息的位置，而是按照html文档流的方式对元素进行布局，用户可以灵活设置元素的层级（layer）和偏移量（transform）。接下来我们看一下简单的实现效果。1、Demo效果从上图的demo中我们可以发现，画布中组件的布局完全是默认的文档流方式，这样我们就有了更加灵活的布局实现。2.实现思路具体实现思路主要分为以下几个部分：从组件区拖拽到画布上。在画布区域中拖放组件编辑器和更新机制。我们讨论的第一点和第三点在H5-dooring中已经实现。有兴趣的可以看看我之前的文章。这里我们着重实现画布区域的拖放，这也是一个比较核心的环节。2.1H5拖拽api基本介绍拖拽（Draganddrop）是HTML5标准的组成部分，长期以来被大部分浏览器所支持。我们目前使用的拖拽插件基本都是基于H5拖拽API实现的。其实先组件区拖放对于画布，我们可以使用原生实现。下面我简单介绍一下。首先我们来看一个完整的拖拽过程：首先我们要设置一个元素为可拖拽（举例），设计拖拽时会发生什么（需要ondragstart事件放在哪里，setData（你要的数据通过），也就是目标容器（通常在目标容器上绑定ondragover和ondrop事件）通过以上三步，我们就可以实现第一点作者写了一个简单的demo，供大家参考：
