快捷導(dǎo)航

通過angular CDK實(shí)現(xiàn)頁(yè)面元素拖放的步驟詳解

更新時(shí)間：2020年07月01日 08:39:46 作者：DeathGhost

這篇文章主要給大家介紹了關(guān)于如何通過angular CDK實(shí)現(xiàn)頁(yè)面元素拖放的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用angular具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

<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;
}

然后我們?cè)谙鄳?yīng)模塊中導(dǎo)入拖動(dòng)模塊即可。

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

在頁(yè)面中，我們就可以直接使用其指令實(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>

通過父級(jí) cdkDrag 與控制子級(jí)控制元素 cdkDragHandle 對(duì)其作用。

設(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)頁(yè)面元素拖放的文章就介紹到這了,更多相關(guān)angular CDK頁(yè)面元素拖放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: