前一陣子（em。。。這個前挺長了）做了一個表單生成組件和流程圖組件。分別使用的是vuedraggable和paperjs。看了一些官方的介紹和源碼，然后就直接上手了。
1.vuedraggable
比較簡單，主要就是將數據和拖動及拖出和拖入事件綁定好就可以了。拖動的時候，會自動生成ghost，移動中換位動畫也是動態的。效果圖：
此外做了預覽、數據保存、校驗。每個組件都可以自定義限制條件。關鍵邏輯是，左側和中間是兩個拖拽部分，右側是form表單。左側拖動到中間，new拖動的組件對應的模型添加到data里，然后通過右側的插槽，使修改右側配置時能雙向同步到數據中。整個是用Vue基於Element組件做的。
2.paperjs
paperjs是基於canvas做的，所以風格和canvas也有一定的相似性。並引入了組、視圖、項目、工具、路徑等概念。官方目前的資料大部分是英文的，官方api也有一些實例不過不夠詳細。效果如下：
設計思路與上邊類似，操作控制也很繁雜，需要比較有耐心。