张铁柱-前端实现《低代码可视化编辑器》(一)思路整理 React-dnd+Ts

张铁柱-前端实现《低代码可视化编辑器》(一)思路整理 React-dnd+Ts

先上效果：

拖拽生成页面+调整顺序
最近，接到任务做一个低代码编辑器，于是着手整理一下思路，调研一下实现方式。

整理思路：

一、实现框架与语言选择：

秉承着用新不用旧+与国际化接轨的思路，考虑到可用三方框架的数量与质量，于是我选择了React+Ts的实现方式。

二、编辑器实现思路：

1、自下而上的构建思路：

实现拖拽 -> 实现组件位置编排 -> 实现组件属性调整 -> 实现画布与功能面板

2、自上而下的构建思路：

实现画布与功能面板 -> JSON 解析成组件 -> 放置到画布相对位置 -> 实现组件拖拽 -> 实现组件属性调整

三、着手实现：

由于编者首次实现可视化编辑器，不清楚相关的三方组件库的支持情况，选择自下而上的实现方式，先去实现单个组件的拖拽功能，再去实现画布与功能区，以确保核心功能不出现问题。

1、选择拖拽库：

调研：编者分别调研了：react-konva、react-dnd、react-beautiful-dnd、craft.js

react-konva&#