question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

cdkDrag: with cdkDropList -> wrong Cursor when dragging

See original GitHub issue

Hi all, issue_1 issue_2

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>

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:4
  • Comments:12 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
crisbetocommented, Aug 9, 2020

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.

4reactions
joelkeslercommented, Sep 28, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I change the cursor when dragging? Material CDK ...
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...
Read more >
5 Things I wish I knew about the CDK's Drag & Drop
To fix the transparency problem, you just clone the item you are dragging, hide the original for the duration of the drag, then...
Read more >
Drag and Drop | Angular Material
Adding cdkDropList around a set of cdkDrag elements groups the draggables into a reorderable collection. Items will automatically rearrange as an element moves....
Read more >
Angular Drag and Drop - Javatpoint
Now you can add the cdkDrag directive to make elements draggable. When outside a cdkDropList element, draggable elements can be moved freely around...
Read more >
Angular 14 Drag and Drop Tutorial with Material Library
The angular/cdk/drag-drop module provides access for creating a drag and ... By adding the cdkDropList, you have certain restrictions in ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found