低代码--拖拽生成schame

$\bullet$ 前言

拖拽和schame应该算是低代码最基础也是最核心的功能了，拖拽后生成正确的schame才能交给渲染引擎正确渲染出组件，才能有后序的交互可言

$\bullet$ 拖拽

这里使用原生拖拽来实现，本来是打算直接将拖拽注册到交互组件上的，这样就不需要手动去判断哪些是有效的可接收拖拽区域的，但是为了更加的人性化一点，在初始时，想在画布区域默认渲染一个空的图标提示

如此，便缺少了拖拽放置的触发条件了，故考虑将拖拽事件注册到整个画布上

这样就只需要为物料中渲染的每一行添加拖拽开始事件即可

在定义物料的时候，我们约定交互组件用于控制物料组件之间的交互行为，故我们强制用户在"画"每一个功能块时都强制使用该组件，那么在拖拽开始时，就应该将画布中所有的交互组件高亮标记出来

使用dom方式去整个画布区内遍历所有的交互组件必然是可行的，但更好的方式是，使用单例模式配合发布订阅者模式，让每一个交互组件都去"观察"拖拽事件，并在拖拽发生时被通知

$\ast$ 定义观察者和事件中心

$\ast$ 在交互组件内部注册观察行为

$\ast$ 拖拽开始和结束时进行高亮

效果如下

$\bullet$ 生成schame

和上边的说明一样，我们要保证每一个“功能区”都被交互组件包裹，故我们需要首先判断页面中是否存在交互组件，以及当前拖拽的目标元素是否被交互组件包裹

此外还需要定位到拖拽目标在现有schame中的哪个位置，为此，我们需要在渲染交互组件时手动为其绑定值，形如1-1-2之类用以标识

最后就是根据获取的位置索引标记递归的查找在schame中的位置，并添加一个item

后来想了想，schame的生成方式太复杂了且dom操作多少有的"违背"vue，其实只需要生成一个唯一的id，然后按照树的遍历定位到目标节点，最后push一个新节点就可以了

$\bullet$ 拖拽画布

上一步已经完成了从物料拖拽到画布，但是拖拽后位置便固定死了，虽然后序可以通过配置面板进行位置调整，但那样的调整我觉得应该是一次"细节"调整，故需要支持对画布中已经渲染的组件进行二次拖拽

在此对组件单独包一层以单独处理拖拽事件

这应该是一次修正行为，具体来说，需要修正两处

框红的位置，对整个schame进行修正

框绿的位置，为当前的组件进行修正（attribute即绑定到组件根节点的style）