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>

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

这是双击时在控制台中显示的错误：

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

Answer 1

这是因为$event的{{1}}和cdkDropListDropped是不同的。因为dblclick dblclick等于MouseEvent实例，所以没有有关项目从何处移动的信息。

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

在模板中，您需要使用来从待办事项移至完成$event 反之亦然，其他区块(dblclick)="dblclickMove($event.target.innerText, 'done', 'todo')"

在这样的控制器功能上：

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

StackBlitz

双击Angular时自动拖放

1 个答案: