Question

查看我的步骤

npm install @ angular / cdk
->从'@ angular / cdk / drag-drop'导入{DragDropModule};并导入：[DragDropModule]
下一步我要创建拖放卡列表。我为一张卡创建了组件，并在要获取[{data}]，生产卡并为当前卡传递当前数据时创建了父组件。

家长组件TS：

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


@Component({
  selector: 'app-groups',
  templateUrl: './groups.component.html',
  styleUrls: ['./groups.component.scss']
})
export class GroupsComponent implements OnInit {

  groups = [something data]

  constructor() { }

  ngOnInit(): void {
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.groups, event.previousIndex, event.currentIndex);
  }
}

Parrent组件HTML

<div cdkDropList class="groups" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let group of groups">
        <app-group cdkDrag [data]="group"></app-group>
    </div>

</div>

但是拖放我的卡不起作用，请帮助我

对于组件HTML中的（cdkDropListDropped）=“ drop（$ event），我有警告（任何适用的指令也没有div元素发出cdkdroplistdropped事件）

Answer 1

请通过以下方式更改您的 ?. component.html 代码：

    <div cdkDropList class="groups" [cdkDropListData]="groups (cdkDropListDropped)="drop($event)">
        <div *ngFor="let group of groups" cdkDrag>
            {{ group }}
        </div>
    </div>

我在一个应用程序中进行了测试，它运行正常。

Answer 2

我解决了这个问题。此代码有效！

<div class="groups" >
    <div cdkDropList class="groups__wrapper" (cdkDropListDropped)="drop($event)">
        <div *ngFor="let group of groups">
            <app-group cdkDrag cdkDragHandle [data]="group"></app-group>
        </div>
    </div>
</div>

如何正确设置Angular的cdk拖放？

2 个答案: