经历了一个月项目升级，从angularjs1.4升级到angular6，决定把项目中的一个功能独立出来。之前在npm上搜索关于拖拽的功能仅仅局限于从一个区域拖放到另一个区域，针对responsive的自定义拖拽页面组件一个都没找着，于是决定自己手动造轮子了。

什么是 ngx-workspace?

它基于12栅格设计风格将页面划分为十二列，一个单位面积等于每一栅格中同等大小的正方形。开发者可导入自定义的组件并自定义组件大小和组件在页面中的位置。用户可以启用编辑模式自定义组件大小和位置并保存。

和其他拖拽组件的不同

目前我在npm上找到的拖拽组件功能都属于列表形式，将一个元素从一个表中拖放到另一个表中，或者改变元素排列顺序。ngx-workspace的定义与这些组件不同，它集成化管理页面中不同区域，可以让用户自定义页面中每个区域和大小，并且可以让用户保存更改，使一个页面具有高度可定制性。

ngx-workspace有什么特点

整个workspace可以设定为自适应页面或者固定大小，组件大小会随着自适应模式变化。

例子

自定义拖动组件

改变组件模块大小和位置

还有自适应模式和固定位置，可以在Demo中尝试

项目Github: https://github.com/donle/ngx-…