要实现Angular CDK的拖放功能,包含多个cdkDrag元素,可以按照以下步骤进行:
npm install @angular/cdk @angular/material
import { DragDropModule } from '@angular/cdk/drag-drop';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
DragDropModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
}
{{item}}
.container {
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: #ccc;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
现在,你可以在浏览器中运行应用程序,并尝试拖动多个cdkDrag元素了。