双击时自动拖放 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>

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

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

ERROR TypeError: Cannot read property 'data' of undefined

Answer 1

这是因为 $event 对于 cdkDropListDropped 和 dblclick 是不同的。因为 dblclick $event 等于 MouseEvent 实例，所以没有关于项目从哪里移动的信息。

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

在模板中，您需要使用从 todo 移动到 done (dblclick)="dblclickMove($event.target.innerText, 'done', 'todo')" 对于其他块 (dblclick)="dblclickMove($event.target.innerText, 'todo', 'done')"

反之亦然

控制器功能如下：

  dblclickMove(itemName: string, ...targets: string[]) {
    this[targets[0]] = [
      ...this[targets[1]].splice(this[targets[1]].indexOf(itemName), 1), 
      ...this[targets[0]]
      ];
  }

StackBlitz

双击时自动拖放 Angular

Automatic drag and drop when double clicking Angular

angular

drag-and-drop

angular-material

angular-material2

angular-cdk