cdkDrag: with cdkDropList -> wrong Cursor when dragging
See original GitHub issueHi 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>
Issue Analytics
- State:
- Created 3 years ago
- Reactions:4
- Comments:12 (4 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 settingpointer-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.For myself, I added the following style override to re-enable the custom cursor while dragging.
Live Example: https://stackblitz.com/edit/angular-g2yu5w?file=src/app/cdk-drag-drop-custom-placeholder-example.css