前言
拖拽和schame应该算是低代码最基础也是最核心的功能了，拖拽后生成正确的schame才能交给渲染引擎正确渲染出组件，才能有后序的交互可言
拖拽
这里使用原生拖拽来实现，本来是打算直接将拖拽注册到交互组件上的，这样就不需要手动去判断哪些是有效的可接收拖拽区域的，但是为了更加的人性化一点，在初始时，想在画布区域默认渲染一个空的图标提示
如此，便缺少了拖拽放置的触发条件了，故考虑将拖拽事件注册到整个画布上
这样就只需要为物料中渲染的每一行添加拖拽开始事件即可
在定义物料的时候，我们约定交互组件用于控制物料组件之间的交互行为，故我们强制用户在"画"每一个功能块时都强制使用该组件，那么在拖拽开始时，就应该将画布中所有的交互组件高亮标记出来
使用dom方式去整个画布区内遍历所有的交互组件必然是可行的，但更好的方式是，使用单例模式配合发布订阅者模式，让每一个交互组件都去"观察"拖拽事件，并在拖拽发生时被通知
定义观察者和事件中心
在交互组件内部注册观察行为
拖拽开始和结束时进行高亮
效果如下
生成schame
和上边的说明一样，我们要保证每一个“功能区”都被交互组件包裹，故我们需要首先判断页面中是否存在交互组件，以及当前拖拽的目标元素是否被交互组件包裹
此外还需要定位到拖拽目标在现有schame中的哪个位置，为此，我们需要在渲染交互组件时手动为其绑定值，形如1-1-2之类用以标识
最后就是根据获取的位置索引标记递归的查找在schame中的位置，并添加一个item
后来想了想，schame的生成方式太复杂了且dom操作多少有的"违背"vue，其实只需要生成一个唯一的id，然后按照树的遍历定位到目标节点，最后push一个新节点就可以了
拖拽画布
上一步已经完成了从物料拖拽到画布，但是拖拽后位置便固定死了，虽然后序可以通过配置面板进行位置调整，但那样的调整我觉得应该是一次"细节"调整，故需要支持对画布中已经渲染的组件进行二次拖拽
在此对组件单独包一层以单独处理拖拽事件
这应该是一次修正行为，具体来说，需要修正两处
框红的位置，对整个schame进行修正
框绿的位置，为当前的组件进行修正（attribute即绑定到组件根节点的style）
