How can I change the cursor when dragging? Material CDK Drag and Drop

Question

Using the Drag and Drop behavior from the Material CDK library, I'm trying to change the cursor upon dragging a cdkDrag element.

For example, in this StackBlitz the cursor is grab upon hover. I'd like it to change to grabbing upon drag. An example of this is what happens when grabbing a row in Google Sheets:

Reading the documentation for styling a drag and drop component, it looks like adding a cursor property to this class should do the trick:

.cdk-drop-list-dragging: A class that is added to cdkDropList while the user is dragging an item.

The code looks like this:

.example-box {
  /* other CSS properties */
  cursor: grab;
}

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

However, as you can see in the StackBlitz, that doesn't seem to change the cursor. I'm guessing this is because this class applies to the list and not the cursor.

Another potential was the .cdk-drag-preview class:

.cdk-drag-preview: This is the element that will be rendered next to the user's cursor as they're dragging an item in a sortable list. By default the element looks exactly like the element that is being dragged.

This doesn't seem to work either. I think it's because it changes the element rendered next to the cursor and not the cursor itself.

Any ideas on how to get the cursor to change while dragging?

Answer 1

The previous solutions did not work for me, but here is something that will most likely work for anyone still having issues:

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 your .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 was helpful.

Answer 2

Just add cursor: grabbing to your example-box:active

.example-box:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
  cursor: grabbing;
}

---

The :active selector is used to select and style the active link.

A link becomes active when you click on it.

Tip: The :active selector can be used on all elements, not only links.

Additional information here

https://www.w3schools.com/cssref/sel_active.asp

---

Stackblitz

https://stackblitz.com/edit/angular-b8kjj3-r993mc?embed=1&file=app/cdk-drag-drop-overview-example.css

Answer 3

For myself, I added the following style override to re-enable the custom cursor while dragging.

.draggable-element .drag-handle{
  cursor: grab;
}

.draggable-element.cdk-drag-preview .drag-handle{
  pointer-events: auto;
  cursor: grabbing;
}

Link to live Example