ngx-workspace Angular自定義可拖動模塊/組件大小和位置

經歷了一個月項目升級，從angularjs1.4升級到angular6，決定把項目中的一個功能獨立出來。以前在npm上搜索關於拖拽的功能僅僅侷限於從一個區域拖放到另外一個區域，針對responsive的自定義拖拽頁面組件一個都沒找着，因而決定本身手動造輪子了。

什麼是 ngx-workspace?

它基於12柵格設計風格將頁面劃分爲十二列，一個單位面積等於每一柵格中同等大小的正方形。開發者可導入自定義的組件並自定義組件大小和組件在頁面中的位置。用戶能夠啓用編輯模式自定義組件大小和位置並保存。

和其餘拖拽組件的不一樣

目前我在npm上找到的拖拽組件功能都屬於列表形式，將一個元素從一個表中拖放到另外一個表中，或者改變元素排列順序。ngx-workspace的定義與這些組件不一樣，它集成化管理頁面中不一樣區域，能夠讓用戶自定義頁面中每一個區域和大小，而且能夠讓用戶保存更改，使一個頁面具備高度可定製性。

ngx-workspace有什麼特色

整個workspace能夠設定爲自適應頁面或者固定大小，組件大小會隨着自適應模式變化。

例子

自定義拖動組件

改變組件模塊大小和位置

還有自適應模式和固定位置，能夠在Demo中嘗試

項目Github: https://github.com/donle/ngx-...