Open
Description
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>