How can I combine a cdkDragDisabled with an cdkDragStarted?

1.3k Views Asked by At

I have some draggable elements. Some of them aren't movable. If the user tries to move them, I want to show an alert, that explains, why you cannot move this element.

I already disabled the movement of those elements, but I think cdkDragDisabled blocks the cdkDragStarted, since the drag doesn't "start". I somehow solved this by clicking on the element, but is there a chance to get the alert, when you try to drag the element?

Here is some minimal code example:

<ngb-alert #selfClosingAlert *ngIf="movingAlert" type="info" (closed)="movingAlert = ''">{{ movingAlert }}</ngb-alert>
// ...
<ng-container *ngFor="let elem of elements">
  <a class="dragelem" cdkDragLockAxis="y" cdkDrag [cdkDragDisabled]="notMovable(elem)" (cdkDragStarted)="changeMovingAlert(elem)">
    <div cdkDragHandle><i class="fas fa-grip-vertical"></i></div>
    // ...
  </a>
</ng-container>

The changeMovingAlert(elem) only triggers if the elem is notMovable.

If I change (cdkDragStarted) to (click) everything works. But not the way it should do.

0

There are 0 best solutions below