通過導入@angular/cdk/drag-drop模塊我們可以輕松實現元素在頁面中得拖放功能，如元素在頁面中隨意拖動、在特定區域內拖動亦或對列表進行拖放排序等等。通過 angular CDK 實現頁面元素拖放?www.deathghost.cn

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>

即可實現自由拖動效果。

我們可以實現自由拖放、列表重新排序、列表間數據傳輸、特指拖放控制、及其拖放臨界點控制等等。

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

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

通過父級 cdkDrag 與 控制子級控制元素 cdkDragHandle 對其作用。

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

如果要阻止用戶將cdkDrag元素拖動到另一個元素之外，可以將CSS選擇器傳遞給該cdkDragBoundary屬性。該屬性通過接受選擇器并查找DOM直到找到與其匹配的元素為止。如果找到匹配項，則將其用作不能拖動元素的邊界。放在里面cdkDragBoundary時也可以使用。

如在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"控制。

更多大家可以參考官方介紹，臨時使用予以筆記，僅供參考！

總結

以上是生活随笔為你收集整理的angular跳转指定页面_通过 angular CDK 实现页面元素拖放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。