Angular Material CDK 掉落事件未触发

Question

我正在尝试使用 Angular material 拖放一个空闲节点。它不是列表的一部分，但我想知道该项目何时被删除。我不确定如何绑定到此事件。

我只是想知道节点何时被删除。

到目前为止，这是我的代码：

    <svg id="svgCanvas" >

    <g *ngFor="let link of linkPaths">
        <path [attr.d]="link"></path>
    </g>

    <g *ngFor="let node of nodes" id="nodesGroup">
        <circle class="node" [attr.cx]="node.x" [attr.cy]="node.y + 45" [attr.r]="settings.nodes.radius"
            (click)="nodeClick($event)"  (dragEnd)="drop($event, node)" [attr.data-selected]="node.data.selected" cdkDrag cdkDragBoundary="#svgCanvas" ></circle>
    </g>

</svg>

我希望触发 dragEnd 事件并在组件代码中调用我的拖放函数。

private drop(event) {
   console.log('drag end')
}

点击事件似乎有效，但拖放不会触发。

我可以看到列表支持拖放功能，但我没有使用列表的拖放功能。这些是自由移动的节点。

Answer 1

使用 (cdkDragEnded) 事件 (cdkDragEnded)="drop($event, node)".

https://material.angular.io/cdk/drag-drop/api

Stackblitz：https://stackblitz.com/edit/angular-fk9wpa

<div class="example-box" (cdkDragEnded)="drop($event)" cdkDrag>
  Contents of dragable element
</div>

你的情况：

    <g *ngFor="let node of nodes" id="nodesGroup">
        <circle class="node" [attr.cx]="node.x" [attr.cy]="node.y + 45" [attr.r]="settings.nodes.radius" (click)="nodeClick($event)" (cdkDragEnded)="drop($event, node)" [attr.data-selected]="node.data.selected" cdkDrag cdkDragBoundary="#svgCanvas" ></circle>
    </g>

Angular Material CDK 掉落事件未触发

Angular Material CDK Drop Event not fireing

javascript

drag-and-drop

angular-material

angular

angular-cdk