Angular7-材质 CDK拖放

Angular 7是一个流行的JavaScript框架之一，它允许开发人员使用最新的Web技术来构建Web应用程序。材质CDK（组件开发工具包）则是Angular框架的一个可选模块，它为开发人员提供了强大的工具来创建漂亮的用户界面。其中包含的拖放功能，让用户可以轻松地拖动和重新排列页面中的元素，从而增强了用户体验。

如何使用材质 CDK拖放功能

要使用拖放功能，需要在项目中添加材质CDK的依赖。可以通过以下命令来安装：

npm install @angular/cdk --save

接下来，你需要导入MatDragDropModule模块到你的应用程序中。在你的模块文件中添加：

import { NgModule } from '@angular/core';
import { MatDragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
  imports: [
    MatDragDropModule
  ]
})
export class AppModule { }

这样，就可以在应用程序中使用拖放了。

示例代码

下面，让我们来看一些示例代码来演示如何在你的应用程序中使用材质 CDK拖放功能：

<div class="example-container">
  <div class="example-list" cdkDropList #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
 
  <div class="example-list" cdkDropList #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList]">
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div>

在这个示例中，我们展示了两个列表，todoList和doneList。这两个列表都可以拥有拖拽元素，并且它们互相连接。我们可以通过拖放元素来将它们移动到不同的列表。

总结

材质CDK提供了强大的拖放功能，这对于开发现代web应用程序来说非常重要。它让用户可以轻松地拖动和重新排列页面中的元素，从而增强了用户体验。如果你还没有使用材质CDK的拖放功能，那么现在可能是时候了。