0

我正在尝试在不从拖动列表中删除项目的情况下进行拖放。我遵循了一个示例工作演示并尝试重现相同的内容。不幸的是，它不起作用，我发现发出了 cdkDropListDropped 事件。您可以在此链接中找到问题有问题的演示

我想像Working demo一样实现

请告诉我我错在哪里。

4

1 回答 1

1

我发现我必须将指令cdkDropList和cdkDropListConnectedTo="drop-list"从带有 ID 的 div移动div1到父 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方法后，它开始工作。请参阅此 StackBlitz进行演示。

于 2021-08-26T14:30:14.463 回答