Thanks to visit codestin.com
Credit goes to github.com

Skip to content

cdkDrag: with cdkDropList -> wrong Cursor when dragging #20246

Open
@Flo0806

Description

@Flo0806

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/drag-drop

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions