cdkDrag: with cdkDropList -> wrong Cursor when dragging

Hi all,

Here is a little sample. https://stackblitz.com/angular/yvmnrxexppp?file=app%2Fcdk-drag-drop-connected-sorting-example.html

Since version 7.2.x (I noticed) there is the problem that the cursor (set in CSS) adapts to the underlying object during the dragging process.

If the cursor is changed to “move” and I use e.g. move an “input” (drag) then the cursor changes from move to input.

This phenomenon only occurs with cdkDropList, not when the cdkDrag property is only set for a single object.

The CSS:

.example-box {
  padding: 20px 10px;
  border-bottom: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: move;
  background: white;
  font-size: 14px;
}

The HTML:

   <div class="col-md-4">

      <div class="drag-container">
        <div class="section-heading">Still Doing</div>
        <div cdkDropList #pendingList="cdkDropList" [cdkDropListData]="todo"
          [cdkDropListConnectedTo]="[doneList,reviewList]" class="item-list" (cdkDropListDropped)="drop($event)">
          <div class="item-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
        </div>
      </div>
    </div>

[crisbeto]

The way we detect whether the user’s pointer is over a drop list is through document.elementFromPoint, but the problem is that the dragged element will always be under the user’s pointer. We’ve worked around it by setting pointer-events: none on the element while it’s dragging which is why your cursor goes away.

It could be worked around by using document.elementsFromPoint and skipping the dragged item’s preview element while going through the array of results, but we’d have to account for some browser differences and do some testing to ensure that performance doesn’t degrade since the latter method is doing a bit more work.

[joelkesler]

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;
}

Live Example: https://stackblitz.com/edit/angular-g2yu5w?file=src/app/cdk-drag-drop-custom-placeholder-example.css