删除项目时未发出 cdkDropListDropped 事件

Question

我正在尝试拖放但不从拖动列表中删除项目。我按照一个例子 Working demo and tried to reproduce the same. Unfortunately it was not working and I found that the cdkDropListDropped event is emitted. You can find the issue in this link Problematic demo

我想达到像Working demo

请告诉我哪里错了。

Answer 1

我发现我必须将指令 cdkDropList 和 cdkDropListConnectedTo="drop-list" 从 ID 为 div1 的 div 移动到父 div 所以 HTML 变为：

<div class="column left" cdkDropList cdkDropListConnectedTo="drop-list">
    <div id="div1" cdkDrag  *ngFor="let type of types" [cdkDragData]="type" (cdkDragMoved)="moved($event)" (cdkDropListDropped)="itemDropped($event)">
        {{type.text}}
        <div *cdkDragPlaceholder class="field-placeholder"></div>
    </div>
</div>

此时 cdkDropListDropped 事件被触发并调用了 itemDropped 函数。问题是，以下行出现运行时错误：

copyArrayItem(
     event.previousContainer.data,
     event.container.data,
     event.previousIndex,
     event.currentIndex
);

从您的工作演示 StackBlitz 复制 itemDropped 方法后，它就开始工作了。请参阅 this StackBlitz 以获得演示。

删除项目时未发出 cdkDropListDropped 事件

cdkDropListDropped event not emitted when item is dropped

angular-material

angular-cdk-drag-drop