title: How can I change the cursor when dragging? Material CDK Drag and Drop
body: <p>Using the Drag and Drop behavior from the Material CDK library, I'm trying to change the cursor upon dragging a <code>cdkDrag</code> element.</p>
  
  <p>For example, in <a href="https://stackblitz.com/edit/angular-b8kjj3" rel="noreferrer">this StackBlitz</a> the cursor is <code>grab</code> upon hover. I'd like it to change to <code>grabbing</code> upon drag. An example of this is what happens when grabbing a row in Google Sheets:</p>
  
  <p><a href="https://i.stack.imgur.com/w7o3l.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/w7o3l.gif" alt="enter image description here"></a></p>
  
  <p>Reading <a href="https://material.angular.io/cdk/drag-drop/overview#styling" rel="noreferrer">the documentation</a> for styling a drag and drop component, it looks like adding a cursor property to this class should do the trick:</p>
  
  <blockquote>
    <p>.cdk-drop-list-dragging: A class that is added to cdkDropList while the user is dragging an item.</p>
  </blockquote>
  
  <p>The code looks like this:</p>
  
  <pre><code>.example-box {
    /* other CSS properties */
    cursor: grab;
  }
  
  .cdk-drop-list-dragging {
    cursor: grabbing;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Another potential was the <code>.cdk-drag-preview</code> class:</p>
  
  <blockquote>
    <p>.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.</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>Any ideas on how to get the cursor to change while dragging?</p>