前言
????拖拽和schame應(yīng)該算是低代碼最基礎(chǔ)也是最核心的功能了储矩，拖拽后生成正確的schame才能交給渲染引擎正確渲染出組件辉词，才能有后序的交互可言
拖拽
????這里使用原生拖拽來實(shí)現(xiàn)，本來是打算直接將拖拽注冊(cè)到交互組件上的骆莹，這樣就不需要手動(dòng)去判斷哪些是有效的可接收拖拽區(qū)域的萨蚕，但是為了更加的人性化一點(diǎn)靶草，在初始時(shí)，想在畫布區(qū)域默認(rèn)渲染一個(gè)空的圖標(biāo)提示
? ? 如此岳遥，便缺少了拖拽放置的觸發(fā)條件了奕翔，故考慮將拖拽事件注冊(cè)到整個(gè)畫布上
? ? 這樣就只需要為物料中渲染的每一行添加拖拽開始事件即可
? ? 在定義物料的時(shí)候，我們約定交互組件用于控制物料組件之間的交互行為浩蓉，故我們強(qiáng)制用戶在"畫"每一個(gè)功能塊時(shí)都強(qiáng)制使用該組件派继，那么在拖拽開始時(shí)，就應(yīng)該將畫布中所有的交互組件高亮標(biāo)記出來
? ? 使用dom方式去整個(gè)畫布區(qū)內(nèi)遍歷所有的交互組件必然是可行的捻艳，但更好的方式是驾窟，使用單例模式配合發(fā)布訂閱者模式，讓每一個(gè)交互組件都去"觀察"拖拽事件讯泣，并在拖拽發(fā)生時(shí)被通知
? ??定義觀察者和事件中心
? ??????在交互組件內(nèi)部注冊(cè)觀察行為
? ??????拖拽開始和結(jié)束時(shí)進(jìn)行高亮
? ? 效果如下
生成schame
? ? ?和上邊的說明一樣纫普，我們要保證每一個(gè)“功能區(qū)”都被交互組件包裹，故我們需要首先判斷頁面中是否存在交互組件好渠，以及當(dāng)前拖拽的目標(biāo)元素是否被交互組件包裹
? ? 此外還需要定位到拖拽目標(biāo)在現(xiàn)有schame中的哪個(gè)位置昨稼，為此，我們需要在渲染交互組件時(shí)手動(dòng)為其綁定值拳锚，形如1-1-2之類用以標(biāo)識(shí)
? ? 最后就是根據(jù)獲取的位置索引標(biāo)記遞歸的查找在schame中的位置假栓，并添加一個(gè)item
后來想了想，schame的生成方式太復(fù)雜了且dom操作多少有的"違背"vue霍掺，其實(shí)只需要生成一個(gè)唯一的id匾荆，然后按照樹的遍歷定位到目標(biāo)節(jié)點(diǎn)拌蜘，最后push一個(gè)新節(jié)點(diǎn)就可以了
拖拽畫布
? ? 上一步已經(jīng)完成了從物料拖拽到畫布，但是拖拽后位置便固定死了牙丽，雖然后序可以通過配置面板進(jìn)行位置調(diào)整简卧，但那樣的調(diào)整我覺得應(yīng)該是一次"細(xì)節(jié)"調(diào)整，故需要支持對(duì)畫布中已經(jīng)渲染的組件進(jìn)行二次拖拽
? ? 在此對(duì)組件單獨(dú)包一層以單獨(dú)處理拖拽事件
? ? 這應(yīng)該是一次修正行為烤芦，具體來說举娩，需要修正兩處
????????框紅的位置，對(duì)整個(gè)schame進(jìn)行修正
? ? ? ? 框綠的位置构罗，為當(dāng)前的組件進(jìn)行修正（attribute即綁定到組件根節(jié)點(diǎn)的style）
