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" 事件能够在组件代码中触发并调用我的 "drop" 函数。

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

点击事件似乎可以正常工作，但是拖放不会触发。

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

- K-Dawg

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>

- Maichel

---

嗨，米歇尔。抱歉，但这似乎是针对列表的。我明确提到我没有使用列表，而你的答案缺乏任何细节...尝试添加代码示例等来改进你的答案。我知道你是 Stack Overflow 的新手，所以我只是给你一些反馈。 - K-Dawg

嘿，你说得对，我改变了我的答案。cdkDropListDropped是用于列表的（与CdkDropList结合使用）。我现在将其更改为cdkDragEnded。这应该可以工作，因为它不是针对列表的，而是与CdkDrag结合使用的。希望能有所帮助。我还添加了一个stackblitz来演示在dragEnd上触发drop函数。 - Maichel

啊，谢谢你Maichel。最终我自己实现了拖放功能。其实并不难，但如果能减少我的代码量，那就值得了。谢谢。我会检查它是否适用于重写，并在我可以测试它的时候设置一个已接受的答案。再次感谢。 - K-Dawg