Material Design 是一种现代化的设计语言，它强调直观、自然的交互方式和美学设计。在前端开发中，我们可以使用 Material Design 来实现更加优雅的用户界面。其中之一的应用场景就是拖动排序效果，本篇文章将为大家分享如何使用 Material Design 实现拖动排序效果。
准备工作
首先，我们需要使用 Angular Material 这个库来实现 Material Design 的样式和交互。这个库是基于 Angular 框架的，所以我们需要安装 Angular 和 Angular Material 两个依赖。同时，我们还需要引入一个叫做 SortableJS 的库，它提供了一个支持拖放排序的 API。
安装 Angular 和 Angular Material：
npm install --save @angular/core @angular/material
安装 SortableJS：
npm install --save sortablejs
实现
首先，我们需要创建一个 Angular 组件来进行拖动排序。我们可以使用 Angular CLI 来生成一个新的组件：
ng generate component my-draggable-list
然后在我们的组件中，我们需要定义一个数组来存储我们的列表，同时还要定义一个方法来更新列表的位置。最后，我们需要使用 Angular Material 提供的 cdkDrag 指令来实现拖动排序的功能。
<!-- my-draggable-list.component.html -->
<div cdkDropList (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of items" cdkDrag>{{item}}</div>
</div>-- -------------------- ---- -------
-- ------------------------------
------ - --------- - ---- ----------------
------ - ------------ --------------- - ---- -------------------------
------------
--------- ------------------------
------------ -------------------------------------
---------- --------------------------------------
--
------ ----- ------------------------ -
----- - ------ --- ----- --- ----- ----
----------- ---------------------- -
--------------------------- -------------------- --------------------
-
-上面的代码中，我们使用 cdkDropList 指令来定义一个可排序的列表，使用 cdkDrag 指令来定义每一个可拖动的元素。然后我们实现了一个 drop 方法来更新列表的位置，其中 moveItemInArray 方法是 Angular Material 提供的函数，可以实现数组元素的位置交换。
自定义
除了默认的拖动排序效果，我们还可以自定义拖动的样式和行为。比如，我们可以定义一个元素的句柄，使得只有通过句柄才能实现拖动。我们还可以改变排序时元素的移动方式，比如添加一个动画效果。
<div cdkDropList (cdkDropListDropped)="drop($event)">
<div *ngFor="let item of items">
<div class="handle" cdkDragHandle></div>{{item}}
</div>
</div>-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ --------------- - ---- -------------------------
------------
--------- ------------------------
------------ -------------------------------------
---------- --------------------------------------
--
------ ----- ------------------------ -
----- - ------ --- ----- --- ----- ----
----------- ---------------------- -
--------------------------- -------------------- --------------------
-
-在上面的代码中，我们增加了一个名为 handle 的元素，通过 cdkDragHandle 指令来将其定义为句柄。然后，我们还可以在 CSS 中自定义样式，添加动画效果等等。
总结
本文介绍了如何使用 Angular Material 和 SortableJS 来实现拖动排序效果。我们创建了一个可排序的列表，使用 cdkDrag 和 cdkDropList 指令来实现拖放排序。通过自定义元素的方式，我们进一步增加了这种效果的可定制性。希望这篇文章可以为大家在前端开发中实现更加优秀的用户界面提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ab869968c7c53b06638ac