angular/cdk 简单拖动不适用于带有 ngFor 的 div

Posted 2023-05-08

【中文标题】angular/cdk 简单拖动不适用于带有 ngFor 的 div

【英文标题】：angular/cdk simple drag not working for div with ngFor

【发布时间】：2019-10-19 00:17:09

【问题描述】：

我需要使用 angular-cdk 使项目可拖动。我已经在应用模块中导入了 DragDropModule。我在 ngFor 中应用 cdkDrag。

<div *ngIf="messages.length" >
    <div
      *ngFor="let message of messages" cdkDrag>
      <strong> message </strong>
    </div>
  </div>

拖动没有按预期工作，控制台中也没有出现错误。拖动功能适用于普通 div 元素。

【参考方案1】：

除了M. Doe的回答，我还得做到以下几点：

将以下内容添加到我的 app.module.ts 文件中：

import  DragDropModule  from '@angular/cdk/drag-drop';
...
imports:
[
    DragDropModule
]

将 cdkDropListData 参数添加到包含要排序的项目列表的父元素：

<div cdkDropList [cdkDropListData]="messages" (cdkDropListDropped)="drop($event) *ngIf="messages.length" >
    <div
      *ngFor="let message of messages" cdkDrag>
      <strong> message </strong>
    </div>
</div>

【参考方案2】：

您应该将 cdkDropList 添加到您的外部 div 以及一个放置事件。

Drag and drop CDK.

component.html

<div cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="messages.length" >
    <div
      *ngFor="let message of messages" cdkDrag>
      <strong> message </strong>
    </div>
  </div>

component.ts

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

【讨论】：

什么是 moveItemInArray()

我明白了。谢谢 ;导入 CdkDragDrop, moveItemInArray from '@angular/cdk/drag-drop';

stackblitz.com/angular/… 删除 strong 标记，因此 div 是循环的孩子。然后将 font-weight: 700 添加到 div 类中以复制一个强类

【参考方案3】：

您应该将 DragDropModule 添加到声明组件的模块中 *ngFor 指令与没有 cdkDropList 的 cdkDrag 指令一起使用

【参考方案4】：

在我的例子中，从 cdkDrag 元素中移除 class 属性固定拖放。