Angular Material CDK Drop Event не запускается

Я пытаюсь использовать материал Angular для перетаскивания свободного узла. Это не часть списка, но я хотел бы знать, когда этот элемент был отброшен. Я не уверен, как я могу привязаться к этому событию.

Я просто хочу знать, когда узел был удален.

вот мой код:

    <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')
}

Событие щелчка, похоже, работает, но падение не срабатывает.

Я вижу, что списки поддерживают функцию перетаскивания, но я не использую перетаскивание для списка. Это свободно движущиеся узлы.


javascript angular drag-and-drop angular-material angular-cdk
person K-Dawg    schedule 27.07.2019    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Используйте событие (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>
person Maichel    schedule 27.07.2019
comment
Привет, Мишель, извини, но это похоже на список. Я прямо упомянул, что я не использую списки, и в вашем ответе отсутствуют какие-либо подробности ... попробуйте добавить примеры кода и т. Д., Чтобы улучшить свой ответ. Я знаю, что вы новичок в Stack Overflow, поэтому я просто даю вам несколько отзывов. - person K-Dawg; 28.07.2019
comment
Эй, ты прав, я изменил свой ответ. cdkDropListDropped предназначен для списка (в сочетании с CdkDropList). Теперь я изменил его на cdkDragEnded. Это должно сработать, потому что это не для списка, а работает в сочетании с CdkDrag. Надеюсь, это поможет. И я добавил stackblitz, чтобы продемонстрировать триггер функции перетаскивания при перетаскивании. - person Maichel; 28.07.2019
comment
Ах, спасибо, Майшель, в конце концов, я просто реализовал перетаскивание самостоятельно. На самом деле это было не так уж и сложно, но если я смогу сократить свою кодовую базу, это того стоит. Спасибо. Я проверю, работает ли он при перезаписи, и установлю принятый ответ, когда смогу его протестировать. Спасибо еще раз. - person K-Dawg; 29.07.2019