通過導(dǎo)入@angular/cdk/drag-drop模塊我們可以輕松實現(xiàn)元素在頁面中得拖放功能，如元素在頁面中隨意拖動、在特定區(qū)域內(nèi)拖動亦或?qū)α斜磉M行拖放排序等等。

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項目我們可以通過導(dǎo)入“@angular/cdk/drag-drop”模塊輕松實現(xiàn)元素自由拖動效果。

首先我們會創(chuàng)建拖放對象，如同：

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

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

然后我們在相應(yīng)模塊中導(dǎo)入拖動模塊即可。

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

在頁面中，我們就可以直接使用其指令實現(xiàn)（cdDrag）。

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

即可實現(xiàn)自由拖動效果。

angular cdk drag-drop

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

拖動元素內(nèi)指定拖動控制，如：

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

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

設(shè)置拖動臨界點，限制在指定區(qū)域進行自由拖動。

如果要阻止用戶將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"控制。

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

總結(jié)

到此這篇關(guān)于通過angular CDK實現(xiàn)頁面元素拖放的文章就介紹到這了,更多相關(guān)angular CDK頁面元素拖放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論