最近在寫一個東西，類似下面這張圖，左邊是組件區，比如有文本、圖片、列表等；中間是渲染區，把左邊的組件拖動到中間區域，就可以渲染一個對應的組件出來；鑑於每個組件需要不同的渲染結果，所以右邊提供對每個組件的渲染內容的設置，根據每個組件類型的不同，右邊編輯區的設置項也不同。
這個東西的使用場景是，讓用戶自定義頁面，中間的渲染區是自定義頁面的效果展示，組件區就是自定義頁面上支持放置的組件。
用react來寫，大體思路是這樣：每個組件包含三個部分，分別是展示在左邊的圖標和文本說明，展示在中間的結果部分，展示在右邊的設置部分，所有支持的組件放在一起，在用戶自定義完畢保存後（數據格式可以用json等），下次渲染出的頁面可以直接用組件的結果部分來渲染。
這裏面的交互大概有這麼些：
- 組件的拖動，從左邊拖動組件到中間以創建一個新組件；中間區域已有組件的拖動以調整位置；從中間區域把已有組件拖出中間區域以刪除；
- 組件的激活，創建組件時立即激活新創建的組件；已有的組件的點擊，以切換和激活編輯
實際編寫時遇到了如下問題：
- 拖動，使用原生的drag相關API在拖動過程中無法獲取鼠標位置，所以使用了mouseup、mousedown、mousemove來模擬拖動
- 中間區域在實際渲染時用的是vue，所以起了一個iframe（這是下面一堆麻煩的源頭），兩個頁面相互通信用postMessage，並且在iframe中無法獲取到外部的鼠標事件，所以用一個div覆蓋在iframe上面獲取鼠標位置，react負責鼠標位置的發送、組件的編輯等，vue負責渲染組件、組件位置的獲取和計算、通知react當前激活的組件信息等，因爲iframe中的座標和外部不一致，所以要做處理，而且還和iframe的佈局位置關聯（?）