Keep cursor grabbing between list. @angluar/cdk/drag-drop

问题

I have this example in stackblitz. I use @angular/cdk/drag-drop in my project. I try to change the cursor to cursor:grabb and cursor:grabbing when the cursor is up an element and when I drag a picked element.

I use this line:

.example-box:active {
  cursor:grabbing
}

But its not working. What's I need to do?

回答1:

I know it's has been a while, but I found a solution to the issue!

first add this global CSS:

body.inheritCursors * {
  cursor: inherit !important;
}

and to your cdkDrag element add cdkDragStarted and attach it to a method in your .ts file:

<div cdkDrag (cdkDragStarted)="dragStart($event)"></div>

In you .ts file you can then toggle the cursor you want when a drag starts and stops:

bodyElement: HTMLElement = document.body;

  dragStart(event: CdkDragStart) {
    this.bodyElement.classList.add('inheritCursors');
    this.bodyElement.style.cursor = 'move'; 
    //replace 'move' with what ever type of cursor you want
  }

  drop(event: CdkDragDrop<string[]>) {
    this.bodyElement.classList.remove('inheritCursors');
    this.bodyElement.style.cursor = 'unset';
    ...
    ...
  }

Here is a link to a working example on StackBlitz

Hope this helps 👨‍💻

来源：https://stackoverflow.com/questions/61741132/keep-cursor-grabbing-between-list-angluar-cdk-drag-drop