0

Is there a way to style a restricted area once a cdkDrag is made to show the Users that they can not make a cdkDrop in that zone and then the styling is removed when the cdkDrop is made in the non-restricted area

I tried to make the restricted area [cdkDropListDisabled]= "true" and then style the .cdk-drop-list-disabled{} but this doesn't give the desired result because it styles the restricted area even before any cdkDrag Event. The desired result is that the restricted area is dynamically styled upon cdkDrag and styling is removed after cdkDrop

Edric
  • 24,639
  • 13
  • 81
  • 91
Samuel Idehen
  • 13
  • 4
  • have you tried using events (cdkDragStarted)="dragStart($event, action)" (cdkDragMoved)="dragMoved($event, action,)" (cdkDragEnded)="dragEnded($event, action)" – Mohit Harshan Jun 26 '20 at 10:55
  • you can get these events and then add classes using [ngClass] or customize styles manually in ts – Mohit Harshan Jun 26 '20 at 10:56
  • I tried using (cdkDragStarted)="dragStart($event, action)" , it didnt work . So I am trying to toggle the [cdkDropListDisabled]="dragging" , dragStart($event,action){ this.dragging =true } but this doesn't work . I cant seem to get [cdkDropListDisabled] to change dynamically or based of an event. – Samuel Idehen Jun 26 '20 at 18:10

0 Answers0