Question

我正在为项目使用Angular 7，并且我想使用Drag n Drop功能。

阅读文档后，我不得不安装Angular Material，这是我不想安装或使用的东西。

说过，我在这里有什么选择？

如果不安装Angular Material，是否可以安装拖放功能？

如果是这样，我最好的选择是什么？

Answer 1

npm install --save @angular/cdk

HTML

<div class="row">

<div class="col-md-6">
    <div cdkDropList [cdkDropListData]="list2" [cdkDropListConnectedTo]="firstList" #secondList="cdkDropList" (cdkDropListDropped)="drop($event)">
        <div *ngFor="let item of list2" class="pop" cdkDrag>{{item}}</div>
    </div>
</div>
<div class="col-md-6">
    <div cdkDropList [cdkDropListData]="list1" [cdkDropListConnectedTo]="secondList" #firstList="cdkDropList" (cdkDropListDropped)="drop($event)">
        <div *ngFor="let item of list1" class="pop" cdkDrag>{{item}}</div>
    </div>
</div>
</div>

脚本 Appmodule

import { ModuleWithProviders, NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DragDropModule} from '@angular/cdk/drag-drop';
@NgModule({
imports: [
    SharedModule,
    DragDropModule
],
declarations: [
    AppComponent       
],
 providers: []
})
export class AppModule { }

Appcomponent.ts

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from 
'@angular/cdk/drag-drop'

 @Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
 })

 export class AppComponent {
 constructor() { }

 list1 = [
    "item 1",
    "item 2",
    "item 3",
    "item 4",
    "item 5"
 ];

 list2 = [
    "item 6",
    "item 7",
    "item 8",
    "item 9",
    "item 10"
 ];

 drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer !== event.container) {
    transferArrayItem(event.previousContainer.data,event.container.data,
    event.previousIndex, event.currentIndex)
    } else {
    moveItemInArray(this.list1, event.previousIndex, event.currentIndex);
    }
 }
}

Answer 2

尝试安装cdk： npm install --save @angular/cdk 并使用CDK拖放模块official doc

Angular 7安装和使用不带材质的拖放n

2 个答案: