Angular 是一款流行的前端框架，但是在实际开发中，我们可能会遇到一些需要自己实现的 UI 组件或者交互效果。这时候，AngularCDK 可以帮助我们快速构建高质量的应用。
AngularCDK 是 Angular 的一部分，它提供了一系列的工具和组件，可以帮助我们快速构建复杂的 UI 组件和交互效果，同时也提高了应用的质量和稳定性。
安装和使用 AngularCDK
要使用 AngularCDK，首先需要安装它：
npm install @angular/cdk --save
安装完成后，在 Angular 的模块中引入需要使用的组件或者工具：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- -------------------------
-----------
-------- -
-------------
--------------
--
-------- -
--------------
--
------------- --
--
------ ----- -------- - -这里以 DragDropModule 为例，引入后就可以在模板中使用了：
<div cdkDrag>Drag me!</div>
Drag and Drop
Drag and Drop 是 AngularCDK 中比较常用的一个工具，可以帮助我们实现拖拽效果。下面我们来详细介绍它的使用：
基本使用
首先，我们需要在模块中引入 DragDropModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- -------------------------
-----------
-------- -
-------------
--------------
--
-------- -
--------------
--
------------- --
--
------ ----- -------- - -然后，在模板中使用 cdkDrag 和 cdkDrop：
<div cdkDropList (cdkDropListDropped)="onDrop($event)">
<div cdkDrag *ngFor="let item of items">{{ item }}</div>
</div>这里 cdkDropList 表示一个可接受拖拽的区域，cdkDrag 表示可以被拖拽的元素。我们将一个数组中的元素渲染成了多个 cdkDrag，然后放到了 cdkDropList 中。
同时，我们为 cdkDropList 绑定了一个 cdkDropListDropped 事件，表示当一个元素从 cdkDrag 中拖拽到 cdkDropList 中时会触发这个事件。在事件处理函数中，我们可以处理这个事件，比如更新数组中的元素顺序。
自定义拖拽元素
默认情况下，拖拽元素是和原始元素一样的。但是，我们可以通过 cdkDragPreview 和 cdkDragPlaceholder 来自定义拖拽元素和占位元素：
-- -------------------- ---- -------
---- ----------- --------------------------------------
---- ------- ----------- ---- -- ------
----------------------------------
--------------------------------------------- ---- --------
------
------------ -------- ---------
------- ---- --------
--------------
------------ -------------
---- ------------------------ -----------
--------------这里，我们分别使用 cdkDragPreviewTemplate 和 cdkDragPlaceholderTemplate 来绑定两个模板，表示拖拽元素和占位元素。在模板中，我们可以自由地定义元素的样式和内容。
自定义拖拽排序
默认情况下，拖拽排序是按照元素在数组中的顺序进行的。但是，我们可以通过 cdkDropListSorting 来自定义排序方式：
<div cdkDropList (cdkDropListDropped)="onDrop($event)"
[cdkDropListSortingDisabled]="!sortingEnabled"
[cdkDropListSortingPredicate]="myPredicate">
<div cdkDrag *ngFor="let item of items">{{ item }}</div>
</div>这里，我们使用 cdkDropListSortingDisabled 来控制是否启用自定义排序，使用 cdkDropListSortingPredicate 来定义排序方式。myPredicate 是一个函数，它接受两个参数（拖拽元素和目标元素），返回一个数字表示它们之间的排序关系。
拖拽限制
有时候，我们希望只能在某个区域内进行拖拽，或者只能在某些元素之间进行拖拽。这时候，我们可以使用 cdkDragBoundary 和 cdkDropListConnectedTo 来限制拖拽范围：
-- -------------------- ---- ------- ---- ----------- ----------------------------------- ---------- ---- ------- ----------- ---- -- --------- ---- -------- ------ ---- ---------- ------------ ---- ------- ----------- ---- -- --------- ---- -------- ------ ---- ---------- ------------ ---- ------- ----------- ---- -- --------- ---- -------- ------
这里，我们使用 cdkDropListConnectedTo 来将多个列表连接起来，使用 cdkDragBoundary 来限制拖拽范围。
总结
AngularCDK 提供了丰富的工具和组件，可以帮助我们快速构建高质量的应用。其中，Drag and Drop 是比较常用的一个工具，它可以帮助我们实现拖拽效果。在使用 Drag and Drop 时，我们需要注意一些细节，比如自定义拖拽元素、自定义拖拽排序、拖拽限制等。通过合理地使用 AngularCDK，我们可以提高应用的质量和稳定性，同时也提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662cc3c4d3423812e4a61248