CODEWITHSUNDEEP
cssangular
Legna
Legna

Reputation: 468

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?

Upvotes: 1

Views: 1797

Answers (2)

Chris Barr
Chris Barr

Reputation: 34093

CDK adds the class cdk-drop-list-dragging to the parent element with the cdkDropList directive on it while dragging. So adding the following CSS works for my situation where I do not allow the element to move outside of the container

.cdk-drop-list-dragging {
  cursor: move;
}

Upvotes: 1

Neveh
Neveh

Reputation: 393

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 👨‍💻

Upvotes: 3

Related Questions