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

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項(xiàng)目中有些場景會(huì)使用元素拖動(dòng)效果，那么對于angular項(xiàng)目我們可以通過導(dǎo)入“@angular/cdk/drag-drop”模塊輕松實(shí)現(xiàn)元素自由拖動(dòng)效果。

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

<div class="drag">拖動(dòng)元素</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)入拖動(dòng)模塊即可。

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

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

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

即可實(shí)現(xiàn)自由拖動(dòng)效果。

angular cdk drag-drop

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

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

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

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

設(shè)置拖動(dòng)臨界點(diǎn)，限制在指定區(qū)域進(jìn)行自由拖動(dòng)。

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

Angular cdkDrag Y軸拖動(dòng)

如在body中拖動(dòng)，禁止拖放至不可見，或通過css選擇器指定臨界點(diǎn)

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

亦或我們可以控制僅在X軸方向或Y軸方向拖動(dòng)

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

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

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

總結(jié)

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

最新評論