經過 angular CDK 實現頁面元素拖放

經過導入@angular/cdk/drag-drop模塊咱們能夠輕鬆實現元素在頁面中得拖放功能，如元素在頁面中隨意拖動、在特定區域內拖動亦或對列表進行拖放排序等等。

CDK. The Component Dev Kit (CDK) is a set of tools that implement common interaction patterns whilst being unopinionated about their presentation. It represents an abstraction of the core functionalities found in the Angular Material library, without any styling specific to Material Design.

WEB項目中有些場景會使用元素拖動效果，那麼對於angular項目咱們能夠經過導入「@angular/cdk/drag-drop」模塊輕鬆實現元素自由拖動效果。

首先咱們會建立拖放對象，如同：

<div class="drag">拖動元素</div>

.drag{
  position:absolute;
  left:0;
  bottom:0;
  border:1px grey solid;
  width:60px;
  height:60px;
  cursor: move;
  z-index:1;
}

而後咱們在相應模塊中導入拖動模塊便可。

import { DragDropModule } from '@angular/cdk/drag-drop'

在頁面中，咱們就能夠直接使用其指令實現（cdDrag）。

<div class="drag" cdkDrag></div>

便可實現自由拖動效果。

angular cdk drag-drop

咱們能夠實現自由拖放、列表從新排序、列表間數據傳輸、特指拖放控制、及其拖放臨界點控制等等。

拖動元素內指定拖動控制，如：

<div class="drag" cdkDrag>
  <span cdkDragHandle class="dragHandle"></span>
</div>

經過父級 cdkDrag 與 控制子級控制元素 cdkDragHandle 對其做用。

設置拖動臨界點，限制在指定區域進行自由拖動。

若是要阻止用戶將cdkDrag元素拖動到另外一個元素以外，能夠將CSS選擇器傳遞給該cdkDragBoundary屬性。該屬性經過接受選擇器並查找DOM直到找到與其匹配的元素爲止。若是找到匹配項，則將其用做不能拖動元素的邊界。放在裏面cdkDragBoundary時也能夠使用。

Angular cdkDrag Y軸拖動

如在body中拖動，禁止拖放至不可見，或經過css選擇器指定臨界點

<div class="drag" cdkDrag>
  <span cdkDragHandle cdkDragBoundary="body" class="dragHandle"></span>
</div>

亦或咱們能夠控制僅在X軸方向或Y軸方向拖動

<div class="drag" cdkDragLockAxis = "x" cdkDrag>
  <span cdkDragHandle cdkDragBoundary="body"  class="dragHandle"></span>
</div>

經過cdkDragLockAxis = "x" 或 cdkDragLockAxis = "y"控制。

更多你們能夠參考官方介紹，臨時使用予以筆記，僅供參考！