双击Angular时自动拖放

Question

在我的应用程序中，我有两个项目列表，可以使用Angular Material的DragDropModule从一个项目转移到另一个项目。

我希望我可以使用拖放，但也使用双击列表中的一个项目自动将其传输到另一个列表。

这是我的代码：StackBlitz HERE

<div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
    (dblclick)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>
<div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
    (dblclick)="drop($event)">
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
</div>

但它不起作用，我不知道怎么做，这是我第一次使用拖放。如果有人愿意这样做，我会感兴趣。

双击时，控制台中显示的错误如下：

错误类型错误：无法读取未定义的属性“数据”

Answer 1

这是因为$event为cdkDropListDropped和dblclick是不同的。对于dblclick，$event与MouseEvent实例相同，因此没有关于项目移动的位置的信息。

我想到的一个解决方案就是编写一个自定义函数，它将从dblclick事件中获取项目名称并获取目标和源名称。有了这些信息，您可以直接在阵列之间轻松移动项目。

在模板中，您需要使用从todo移动到完成qazxsw poi，反之亦然for other block qazxsw poi

在这样的控制器功能：

(dblclick)="dblclickMove($event.target.innerText, 'done', 'todo')"

(dblclick)="dblclickMove($event.target.innerText, 'todo', 'done')"